Pixmora

Иконка изображения для галереи

Рамка Lucide с кругом-солнцем и горами: готовое изображение. Стопка images - несколько файлов; image-plus - добавить картинку.

Как применить иконку «Кадр»

Сценарий страницы: Пустое превью слота галереи. Основной вариант - lucide:image, набор Lucide, автор Lucide Contributors, лицензия ISC.

Кадр (image): Прямоугольник с солнцем и линией гор. Миниатюра, пустой слот, пункт «изображение».

Несколько кадров (images): Стопка из двух картинок. Галерея или выбор нескольких файлов.

Добавить изображение (image-plus): Кадр с плюсом снаружи. Кнопка загрузки нового изображения.

В слоте превью 32–48 px. В списке вложений 20–24. Для самой фотографии пользователя берите исходник, не эту пиктограмму.

Это пример разметки-заглушки. Когда появится фото пользователя, замените декоративный SVG на реальное изображение с содержательным alt. Путь к lucide-image.svg замените на скачанный.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Нет изображения. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<figure>
  <img src="lucide-image.svg" width="48" height="48" alt="">
  <figcaption id="gallery-empty">Нет изображения. Загрузите JPG или PNG.</figcaption>
</figure>

Частые вопросы

Почему alt у заглушки пустой?

Пиктограмма декоративна, смысл в figcaption. У реального фото пользователя alt должен описывать снимок.

Чем image отличается от crop?

image - показать или выбрать картинку. crop - инструмент кадрирования рамкой.