- Дизайнер рисует иконки в фигме.
- С помощью фигма-плагина создаётся пулл-реквест с иконками в репозиторий ui-primitives.
- После мёрджа пулл-реквеста в ui-primitives и публикации нового пакета, с помощью github-actions начинается процесс генерации новых реакт-компонентов на основе svg-файлов иконок.
- После успешной генерации новых React-компонетов, публикуются новые версии пакетов.
На данный момент есть следующие пакеты иконок:
| Пакет | Ссылка на npmjs.com | Описание |
|---|---|---|
| @alfalab/icons | @alfalab/icons | Общий пакет со всеми иконками |
| @alfalab/icons-classic | @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 | Иконки corp |
import { AddMIcon } from '@alfalab/icons-glyph/AddMIcon';
или
import AddMIcon from '@alfalab/icons-glyph/AddMIcon';
Все иконки соответствуют размерной сетке.
В пакете @alfalab/icons-glyph цвет иконок задается атрибутом fill="currentColor", т.е. цвет наследуется от родительского свойства color.
В пакете @alfalab/icons-classic цвет иконок не наследуется.