Pixmora

Иконка уменьшения масштаба

Лупа с минусом Lucide отдаляет вид. Держите её в паре с zoom-in и блокируйте на минимальном масштабе, чтобы не обещать невозможное действие.

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

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

Лупа с минусом (zoom-out): Круг лупы и минус в центре. Отдалить изображение, карту, холст.

Лупа с плюсом (zoom-in): Та же лупа с плюсом: обратное действие. Парная кнопка увеличения.

Симметрично zoom-in: 18–20 px в панели. На карте часто те же размеры, что у кнопок слоёв рядом.

Это пример разметки без обработчиков. Ограничения min/max масштаба и disabled задайте в коде. Пути к SVG замените. Группа с aria-label помогает скринридеру связать пару кнопок.

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

Файлы SVG

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

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

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

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

<div role="group" aria-label="Масштаб">
  <button type="button" aria-label="Уменьшить">
    <img src="lucide-zoom-out.svg" width="20" height="20" alt="">
  </button>
  <button type="button" aria-label="Увеличить">
    <img src="lucide-zoom-in.svg" width="20" height="20" alt="">
  </button>
</div>

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

Что показывать на минимальном зуме?

Отключите кнопку и обновите доступное имя, например «Уменьшить, минимум». Не оставляйте активный вид, если действие ничего не меняет.

Подойдёт ли minus вместо zoom-out?

Для масштаба изображения нет: minus про количество или сворачивание. Здесь важна метафора лупы.