Как ответить
Пиктограмма — это векторное изображение, которое передаёт смысл или действие через простую визуальную метафору. В веб-разработке это не просто картинка, а элемент интерфейса, который должен быть узнаваемым, масштабируемым и доступным.
На фронтенде пиктограммы используются в трёх основных форматах:
- SVG-спрайты — самый популярный способ. Мы собираем все иконки в один файл-спрайт и подключаем через
<use>. Это даёт кэширование и контроль над стилями через CSS (цвет, размер, анимация). - Иконические шрифты (Font Awesome, Material Icons) — работают через глифы. Минус: если шрифт не загрузился, пользователь видит квадраты. Плюс: легко менять цвет через
color. - Инлайн-SVG — вставляем разметку прямо в HTML. Даёт полный контроль, но раздувает DOM. Используем для уникальных иконок (логотип, сложные формы).
Ключевые требования к пиктограмме в интерфейсе:
- Семантика: иконка должна интуитивно понятной. Например, «корзина» для удаления, «шестерёнка» для настроек. Нельзя использовать иконку дома для кнопки «помощь».
- Доступность: для скринридеров обязательно добавлять
aria-labelилиtitle. Если иконка декоративная (просто украшение), ставимaria-hidden="true". - Размер: стандартная сетка — 24x24px для основных иконок, 16x16px для маленьких (действия в таблицах). Важно соблюдать паддинги внутри viewBox, чтобы иконка не прилипала к краям.
- Цвет: используем
currentColorв SVG, чтобы иконка наследовала цвет текста. Тогда при ховере не нужно переопределять заливку.
<!-- Пример доступной SVG-иконки -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Поиск" role="img">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/>
</svg>На практике чаще всего использую SVG-спрайты с Webpack/Vite через @svgr/webpack или плагин для спрайтов. Это даёт tree-shaking — в сборку попадают только те иконки, которые реально используются на странице.
Важно помнить: пиктограмма — это не кнопка. Если иконка кликабельна, она должна быть обёрнута в <button> или <a>, а не просто SVG с обработчиком. Иначе нарушается семантика и доступность.