- Дизайнер рисует иконки в фигме.
- С помощью фигма-плагина создаётся пулл-реквест с иконками в репозиторий 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 цвет иконок не наследуется.