Иконочный шрифт

Иконочный шрифт (icon font) — это шрифт, в котором вместо букв и цифр содержатся векторные иконки.

Векторные иконки отлично масштабируются без потери качества, в отличие от растровых изображений (например, PNG или JPEG). Они будут четкими на экранах с любым разрешением.

Использовать иконочные шрифты часто проще, чем работать с отдельными файлами изображений: достаточно подключить шрифт и использовать CSS-класс для отображения нужной иконки.

Иконки в иконочном шрифте можно стилизовать с помощью CSS, например, изменить цвет или размер.

Экспорт иконок из Figma

В дизайне сайта в Figma выделите компонент с иконкой, он должен быть квадратным (одинаковые высота и ширина):

Правильно 👍

Неправильно 👎

В правой панели экспортируйте компонент в формате SVG:

Экспорт иконок из шрифта

Вы можете экспортировать все иконки из иконочного шрифта с помощью конвертора Iconly: https://iconly.io/tools/font-to-icons-converter

Добавление иконок в проект

Иконки в формате svg нужно сохранить в директорию public/icons.

Название иконок должно быть в нотации kebab-case.

Генерация иконок

Для генерации иконок из svg-файлов в иконочный шрифт нужно выполнить:

pnpm generate-icons

Добавленные в шрифт иконки можно посмотреть в браузере на автоматически сгенерированной странице public/fonts/icons/index.html

Использование иконочного шрифта

Иконка добавляется с помощью класса с префиксом icon-.

Кастомизация вида иконки производится с помощью дополнительного класса родительского компонента:

Изменить цвет иконки можно с помощью color
Изменить размер иконки можно с помощью font-size

Например, если нужно добавить иконку к кнопке, то внутри <button> следует добавить элемент <span> с классом иконки. Иконка унаследует стили класса button, но если нужно кастомизировать именно иконку, то следует добавить дополнительный класс button__icon и написать стили в него:

<button class="button">
  подписаться <span class="button__icon icon-vk"></span>
</button>

.button {
  &__icon {
    color: blue;
    font-size: 24px;
    line-height: 1;
  }
}

Компонент

Готовый компонент <Icon/> включает в себя все иконки и имеет следующие пропсы:

icon — название иконки без префикса icon-
class — кастомный css-класс для стилизации