Как найти иконку

Витрина иконок с поиском

Как сюда попадают новые иконки

• Дизайнер рисует иконки в фигме.
• С помощью фигма-плагина создаётся пулл-реквест с иконками в репозиторий ui-primitives.
• После мёрджа пулл-реквеста в ui-primitives и публикации нового пакета, с помощью github-actions начинается процесс генерации новых реакт-компонентов на основе svg-файлов иконок.
• После успешной генерации новых React-компонетов, публикуются новые версии пакетов.

Какие есть пакеты иконок

На данный момент есть следующие пакеты иконок: | Пакет | Ссылка на npmjs.com | Описание | ------ | ------ | ------ | @alfalab/icons | @alfalab/icons | Общий пакет со всеми иконками | @alfalab/icons-classic (old) | @alfalab/icons-classic | Устаревшие иконки | @alfalab/icons-glyph | @alfalab/icons-glyph | Основной стиль иконок для всех продуктов | @alfalab/icons-flag | @alfalab/icons-flag | Иконки флагов стран | @alfalab/icons-logotype | @alfalab/icons-logotype | Логотипы | @alfalab/icons-corp | @alfalab/icons-corp | Используются только в продуктах корпоратов | @alfalab/icons-rocky | @alfalab/icons-rocky | Иконки в новом стиле | @alfalab/icons-ios | @alfalab/icons-ios | Используются только на iOS устройствах | @alfalab/icons-android | @alfalab/icons-android | Используются только на Android устройствах

Как импортить иконки в проект

import { IconName } from '@alfalab/{packageName}/{IconName}';

или

import IconName from '@alfalab/{packageName}/{IconName}';

Цвет иконок

В пакете @alfalab/icons-glyph цвет иконок задается атрибутом fill="currentColor", т.е. цвет наследуется от родительского свойства color.

В пакете @alfalab/icons-classic цвет иконок не наследуется.