#55 Angular UIKit. Сделай библиотеку иконок правильно.
Записывайтесь на курсы школы ИТ лидеров https://growleader.ru
Ваши потребности выросли до такого масштаба, что вы решили создать свою дизайн систему, чтобы показать философию вашей компании или продукта. Кажется, что на рынке немногие компании идут по такому сложному маршруту, их можно пересчитать по пальцам — designsystemsclub.ru. Они создают тусовки и вебинары, в этом месяце они выступят на fintechdesign.ru. Альфа, Сбербанк, Райффайзенбанк, Тинькофф и другие ребята. Думаю их доклады будут концептуальны и не раскроют технической реализации. Они расскажут про процессы и команды, измерения, плюсы и минусы…
Иконки одна из составляющих дизайн систем. Может показаться, что это самый простой компонент, который только можно сделать. Обычно их используют примерно так:
<my-icon type=’face’></my-icon>
Но давайте предъявим требования к ним!
- Легко поставлять в проекты от дизайнера
- Если нужно быстро поставить иконку без обновления npm пакета было бы api для добавления иконки из assets.
- Иконки это объемный бангл, нужно обеспечить tree shaking!
- Переиспользовать части экосистемы иконок в angular и react.
С чего же начать, как организовать библиотеку иконок для фронтендов. Все очень просто — нужно начать. Поехали!
- Создадим несколько иконок в figma. Для этого добавим новую страницу в редакторе, это потребуется для автоматического импорта в код.
2. Создадим workspace, внутри которого будет лежать проект и библиотека. ng new ng new ng-ui-icons.
3. Сгенерируем библиотеку ng generate library ng-ui-icons.
4. Добавим иконки из figma в проект.
5. Создадим компонент icon, который будет рендерить иконку в зависсимости от типа иконки.
6. Нас интересует производительность библиотеки, поэтому установим зависимость dev, которая называется webpack-bundle-analyzer. Пакет позволяет вам визуализировать размер выходных файлов webpack.
npm install — save-dev webpack-bundle-analyzer
в package.json добавим скрипт “analyze”: “ng build — prod — stats-json && webpack-bundle-analyzer ./dist/ng-ui-icons/stats.json”
соберем билд ng build и выполним команду анализа npm run analyze
Добавим 15 иконок и увидим, что даже если мы используем одну из них, то размер бангла вырос на 26 кб. А в UI китах обычно больше сотки иконок!
Реализуем компонент иконок правильно - treeshakable.
7. Добавим файл icons.ts, который будет содержать иконки:
8. Добавим сервис регистрации и получения иконок.
9. Доработаем компонент
10. Зарегистрируем нужную иконку в модуле приложения
проверим, что иконка отрендерилась
Проверим, что библиотека теперь treeshakable и добавим еще десяток иконок. Выполним анализ банглов и увидим, что размер не растет как раньше.
Ссылка на проект https://github.com/AnteaterKit/ui-icons
Теперь мы умеем работать с иконками в angular проектах. Для реализации общих иконок в ваших продуктах на разных фротенд фрейморках можно использовать следующую архитектуру.
Можно построить следующий процесс:
- Дизайнер рисует иконки.
- Реализуем импорт иконок из figma в svg файлы.
- Есть скрипт, который генерирует их в ts файл с иконками angular.
- Для библиотеки реакта реализуем подобный скрипт.
Получаем удобный механизм иконок для UiKit из дизайн системы.
Автоматизировать импорт иконок из figma можно на примере: https://medium.com/better-programming/how-to-automate-design-tokens-in-a-design-system-189d3e6fd103
