Pixmora

Иконка увеличения масштаба

Лупа с плюсом Lucide приближает изображение или схему. Это не поиск по сайту: у поиска своя тема search без плюса внутри.

Как применить иконку «Лупа с плюсом»

Сценарий страницы: Масштаб просмотра. Основной вариант - lucide:zoom-in, набор Lucide, автор Lucide Contributors, лицензия ISC.

Лупа с плюсом (zoom-in): Круг лупы, рукоять и плюс в центре. Приблизить фото, карту, чертёж, превью товара.

Лупа с минусом (zoom-out): Та же лупа, в центре минус: отдаление. Парная кнопка уменьшения масштаба.

На панели просмотрщика 18–20 px. На углу превью 16. Не путайте размер иконки с фактором зума: 24 px у кнопки не означает +24% кадра.

Это пример разметки без обработчиков. Логику масштаба или лайтбокса подключите в проекте. preview.jpg и подпись TEST демонстрационные. Путь к SVG замените. У кнопки без текста нужен aria-label.

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

Файлы SVG

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

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

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

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

<figure>
  <img src="preview.jpg" width="320" height="200" alt="Чертёж TEST">
  <button type="button" aria-label="Увеличить">
    <img src="lucide-zoom-in.svg" width="20" height="20" alt="">
  </button>
</figure>

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

Чем zoom-in отличается от search?

search - найти данные по запросу. zoom-in - изменить масштаб уже открытого изображения или холста.

Нужен ли отдельный файл для активного зума?

Нет. Состояние передайте aria-pressed или текстом текущего масштаба рядом.