npm package: @kaspersky/icons
Description: Kaspersky Design System Icon Pack
Author: AO Kaspersky Lab
Latest version: 2.3.0

# @kaspersky/icons

Этот npm пакет - отдельная библиотека иконок, которую вы можете использовать в своих проектах.

**Библиотека иконок имеет две основные реализации:**
- *со стороны Design System:* svg пак иконок в [Figma](https://www.figma.com/file/sFYnrrW2tEOurX8rL2OCki/Icons?type=design&mode=design&t=SLAwY6QlYlkBdfPc-0). Обновлением иконок в Figma и поддержкой пака иконок в актуальном состоянии занимается команда дизайнеров DRO.
- *со стороны UI Kit:* npm пакет содержащий все иконки из дизайн системы. Поддержкой npm пакета иконок @kaspersky/icons занимается команда разработки UIF.
- [StoryBook](https://kasperskylab.github.io/uif/icons/)

## Установка
``` js 
npm install @kaspersky/icons 
yarn add @kaspersky/icons 
```

Установка зависимостей:
``` js 
npm install 
```

## Использование в проекте
**Import:**
``` js 
import { AccountIdentity } from '@kaspersky/icons/24'
import { AccountLogin, Like } from '@kaspersky/icons/24'
```
``` js 
const { AccountIdentity } = require('@kaspersky/icons/24')
```

**Props:**
| Name          | Type                                       | Default                      |
| ------------- |:-----------------------------------------: | ---------------------------- |            
| color         | string                                     | 'currentColor'               |             

**Example:**
``` js 
`<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](README.md))
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.