@kaspersky/icons

Этот npm пакет - отдельная библиотека иконок, которую вы можете использовать в своих проектах.

Библиотека иконок имеет две основные реализации:

• со стороны Design System: svg пак иконок в Figma. Обновлением иконок в Figma и поддержкой пака иконок в актуальном состоянии занимается команда дизайнеров DRO.
• со стороны UI Kit: npm пакет содержащий все иконки из дизайн системы. Поддержкой npm пакета иконок @kaspersky/icons занимается команда разработки UIF.
• StoryBook

Установка

npm install @kaspersky/icons 
yarn add @kaspersky/icons 

Установка зависимостей:

npm install 

Использование в проекте

Import:

import { AccountIdentity } from '@kaspersky/icons/24'
import { AccountLogin, Like } from '@kaspersky/icons/24'

const { AccountIdentity } = require('@kaspersky/icons/24')

Props:

Name	Type	Default
color	string	'currentColor'

Example:

`<AccountIdentity />`
`<AccountIdentity color="red"/>`
`<AccountIdentity data-testid="test-icon"/>`

Обновление иконок внутри npm пакета (ручной режим):

1. Скачиваем актуальный пак svg иконок из Figma с группировкой по размерам

• Не выделяя листов или иконок, нажимаем в сайдбаре справа на кнопку Export
• В пункте Presets нажимаем на плюс +
• В раскрывшимся меню выбираем формат иконок SVG
• Нажимаем кнопку "Export Library - Icons"

2. Копируем svg иконки в папку src/iconsSources
3. Запускаем скрипт для трансформации svg иконок в React компоненты: npm run icons:prepare (комплексная команда, которая работает в автоматическов режиме, расширенный список команд в разделе Команды package.json)
4. В папке iconsSVGs должны появится svg файлы с правильными именами, остальные этапы сборки происходят в PR.
5. Создаём PR. Все сборки проходят автоматически

Команды package.json

Базовые команды:

• "iconsArtifacts:clean": удаление всех разультатов сборки rollup
• "icons:clean": удаление автогенерированных файлов библиотекой svgr
• "iconsSVGs:clean": удаления svg файлов с подготовленными именами
• "icons:prepare": Подготовка исходников svg файлоа
• "icons:transform": запуск трансформации svg иконок в компоненты react
• "icons:updateImports": обновление импортов для сборки
• "icons:create": генерация файлов с помощью svgr
• "icons:build": полная сборка пакета с удалением всех генерируемых файлов

Вспомогательные команды:

• "svgr:help": справка по командам и опциям svgr
• "rollup:help": справка по командам и опциям rollup
• "lint": проверить код иконки на ошибки
• "lint:fix": проверить код иконки на ошибки и автоматически исправить

Сборка пакета:

Может производиться двумя способами:

1. Запускаем скрипт npm run icons:create, после трансформации svg иконок в React компоненты запускаем сборку пакета скриптом npm run icons:build
2. Запуск трансформации svg иконок и сборки пакета одной командой npm run build

В корне проекта будет находится готовая сборка пакета (production build) в 2 основных форматах: commonjs и es6

Конфигурационные файлы:

SVGR:

@kaspersky/icons использует SVRG cli (https://react-svgr.com/) для трансформации svg иконок из Figma в React компонент.

SVGR предварительно оптимизирует и сжимает размер svg иконки через инструмент SVGO в автоматическом режиме, затем генерирует React компонент с svg иконкой при помощи Babel шаблонов и форматирует код с помощью Prettier. На выходе мы получаем готовый компонент.

Настройка svgr производится либо через параметры командой строки и через конфигурационный файл svgr.config.js (предпочтительный вариант для удобства чтения) Конфигурационный файл лежит в корневой директории src.

Настройка шаблона экспорта иконки производится внутри файла шаблона templateIcons.js Файл шаблона лежит в корневой директории src.

Параметры cli строки:

1. --config-file ./svgr.config.js: путь к конфигурационному файлу
2. --out-dir src -- ./src/iconsSources: установка input (icons) и output (src) директорий

Конфигурационный файл svgr.config.json основные опции:

1. typescript: генерирует выходной файл в формате .tsx
2. replace-attr-values: заменяет значения атрибутов внутри svg
3. template: путь к файлу шаблона экспорта компонентов

Rollup:

@kaspersky/icons использует сборщик Rollup (https://rollupjs.org/)

При запуске команды сборки пакета, бандлер создаст директорию build с двумя подпапками для каждой сборки: cjs (CommonJS) и esm (ES Module) Конфигурационный файл для настройки rollup.config.js Конфигурационный файл лежит в корневой директории src.