# Библиотека иконок

[<img src="https://tech.skbkontur.ru/kontur-ui/favicon.svg" alt="" height="16" /> Шоу-Кейс](https://guides.kontur.ru/re/sources/icons/)
[<img src="https://static.figma.com/app/icon/1/favicon.svg" alt="" height="16" /> Figma](https://www.figma.com/design/69XYlhg5sQ5i7by1lhzXmP/%E2%9A%A1-Kontur-Icons?node-id=1176-24002&p=f&t=Nlj2vZPZRow4CrXi-0)

## ESM-only

Начиная с версии 2.0 пакет поставляется только в ESM формате.
Если у вас возникают сложности, то попробуйте пакет [@skbkontur/ui-cdn-components](https://www.npmjs.com/package/@skbkontur/ui-cdn-components). Он имеет dual-build, но грузит иконки с сервера статики.

## Установка

```bash
npm i @skbkontur/icons
```

## Библиотека предоставляет гранулярные иконки

Гранулярные иконки (`IconCheckLight16`,`IconXRegular20`) содержат одно конретное начертание, как в макете Фигмы.

## Импорт

```ts
import { IconCheckARegular16 } from "@skbkontur/icons/IconCheckARegular16";
import { IconMathDeltaRegular20 } from "@skbkontur/icons/IconMathDeltaRegular20";
import { IconMathDeltaLight20 } from "@skbkontur/icons/IconMathDeltaLight20";
import { IconArchiveBoxSolid24 } from "@skbkontur/icons/IconArchiveBoxSolid24";
```

Из корня можно импортировать некоторые типы:

```ts
import {
  IconSize, // 16 | 20 | 24 | 32 | 64
  IconWeight, // "light" | "regular" | "solid"
  IconComponent, // React.FunctionComponent<IconProps>
  IconProps, // См. ниже
} from "@skbkontur/icons";
```

## Пропсы

| Name    | Description                                                                                                                  | Default                   |
| ------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `size`  | Масштабирование начертания                                                                                                   |                           |
| `color` | Цвет иконки                                                                                                                  | Наследуется цвет родителя |
| `align` | Выравнивание иконки:<br/>`"baseline"` — по базовой линии<br/>`"center"` — по центру контента<br/>`"none"` — без выравнивания | `"center"`                |