npm package: @skbkontur/ui-cdn-components
Description: Component icons, logo, from static server
Latest version: 1.10.3

# Ui Cdn Components


## Storybook
https://ui-cdn-components-56dad0.gitlab-pages.kontur.host

## Что это

Обертки на реакте для ресурсов которые лежат на https://s.kontur.ru/common-v2/.

Библиотека не содержит самих ресурсов, а является лишь удобной оберткой на реакте. 
Все ресурсы будут скачиваться в runtime через сеть.

### Установить пакет

```text

npm i -S @skbkontur/ui-cdn-components


```


```text

Иконку можно получить либо по имени (icon=doc) либо по полному урлу.

// Должен быть задан или icon, или url

type IconProps = 
 { icon: Название иконки  } | 
 { url: Полный url иконки; (https://s.kontur.ru/common-v2/icons-ui/black/animal-paw/animal-paw-16-light.svg) };

interface CdnIconPropsCommon {
    size?: Размер иконки (16 | 20 | 24 | 32 | 64) - потянется с сервера статики, либо произвольный размер - будет масштабирован;
    weight?: Вес иконки ("light" | "regular" | "solid");
    color?: Цвет иконки (любой цвет совместимый с sRGB, red, #ff0000 и тд);
    align?: "center" | "baseline" | "none"
    embed?: boolean; // если задан, то изображение скачается в документ в виде SVG, а не будет применяться как background-image  
    alt?: "" — подпись к изображению иконки
    lazy?: boolean — ленивая загрузка иконок, только когда видно во viewport, не реализовано для embed=true
    onLoad?: (e?: React.SyntheticEvent<HTMLImageElement>) => { ... } — колбэк успешной загрузки иконки
    onError?: (e?: React.SyntheticEvent<HTMLImageElement>) => { ...} — колбэк ошибки при загрузке иконки
}

export type CdnIconProps = IconProps & CdnIconPropsCommon;
```

### Пример использования иконки

```typescript jsx
import { Button } from "@skbkontur/react-ui";
import { CdnIcon } from "@skbkontur/ui-cdn-components";


<div>
    Я иконка в тексте <CdnIcon icon="animal-paw" />.
    Привет!
</div>

<Button
    size={"small"}
    icon={<CdnIcon icon="animal-paw" size={16}/>}
>
    Я кнопка
</Button>

<div>
  Можно использовать CdnIconProvider чтобы переопределить Url для получения иконки
  <CdnIconProvider value={{ getIconUrl }}>
    <CdnIcon icon="doc" color="red" embed />
  </CdnIconProvider>
</div>
```

### Пример использования логотипа

```typescript jsx
import { Button } from "@skbkontur/react-ui";
import { CdnLogo } from "@skbkontur/ui-cdn-components";

// Если логотип важен для понимания пользователем контекста. Например, используется в ссылке, то нужно указать name с подходящим названием.

<CdnLogo {...props} name="Контур Доступ" logo="logo-access-24" />

// Если логотип используется как декоративный элемент и не влияет на понимание контекста, то name можно не указывать.

<CdnLogo {...props} logo="logo-access-24" />

<div>
  Можно использовать CdnLogoProvider чтобы переопределить Url для получения логотипа
  <CdnLogoProvider value={{ getLogosUrl }}>
    <CdnLogo logo="logo-ai-en-24" />
  </CdnLogoProvider>
</div>
```

### Пример использования иконки продукта

```typescript jsx
import { CdnProductIcon } from "@skbkontur/ui-cdn-components";

// Базовое использование — укажите название продукта и размер
<CdnProductIcon product="adaptation" size={128} />

// Доступные размеры: 16, 24, 32, 36, 48, 64, 82, 128, 256, 512
<CdnProductIcon product="adaptation" size={64} />
<CdnProductIcon product="adaptation" size={256} />

// Символьная иконка (symbol) — упрощённая версия для мелких размеров
// Доступные размеры для symbol: 16, 24, 32, 36, 48, 64
<CdnProductIcon product="adaptation" size={32} symbol />

// Если иконка важна для понимания контекста, укажите name для атрибута alt
<CdnProductIcon product="adaptation" size={128} name="Адаптация" />

// Если иконка декоративная, name можно не указывать — она будет скрыта от скринридеров
<CdnProductIcon product="adaptation" size={128} />

<div>
  Можно использовать CdnProductIconProvider чтобы переопределить Url для получения иконки продукта
  <CdnProductIconProvider value={{ getProductIconUrl }}>
    <CdnProductIcon product="adaptation" size={128} />
  </CdnProductIconProvider>
</div>
```

#### Пропсы CdnProductIcon

```text
interface CdnProductIconProps {
    product: string;                    // Название продукта (например, "adaptation")
    size: ProductIconSize;              // Размер: 16 | 24 | 32 | 36 | 48 | 64 | 82 | 128 | 256 | 512
    symbol?: boolean;                   // Использовать символьную версию иконки (размеры 16-64)
    name?: string;                      // Название для alt, если пусто — иконка скрыта от скринридеров
    style?: CSSProperties;              // Кастомные стили
    // + стандартные HTML-атрибуты для img
}
```

### Для разработчиков пакета 

```
Минимальная версия node.js >= 22.18
```