---
title: Использование SVG-спрайтов
description: Как добавлять и использовать SVG-иконки в коде.
keywords: [svg, спрайт, sprite, иконка, icon, SvgSprite, превью, preview, цвет, color]
---

# Использование SVG-спрайтов

Как добавлять и использовать SVG-иконки в коде.

## Шаги

1. **Положить SVG в папку спрайта:**

   ```text
   src/shared/sprites/icons/new-icon.svg
   ```

2. **Импортировать компонент.** Компонент `<SvgSprite/>` генерируется пакетом вместе с типами имён иконок — автодополнение работает без ручных описаний:

   ```tsx
   import { SvgSprite } from 'ui/svg-sprite'

   <SvgSprite icon="new-icon" />
   ```

3. **Посмотреть и пощупать иконку — в превью.** Пакет генерирует HTML-превью рядом со спрайтом (`public/sprites/icons.preview.html`). Там виден набор иконок, имена и поведение цвета.

## Управление цветом

При сборке цвета в SVG заменяются на CSS-переменные `--icon-color-N`. Управление — через обычный CSS родителя.

**Моно-иконка** наследует `color` родителя (`--icon-color-1` по умолчанию `currentColor`):

```css
.button {
  color: var(--color-primary);
}
```

**Точечное переопределение** — через переменную:

```css
.icon-danger {
  --icon-color-1: var(--color-danger);
}
```

**Мульти-иконка** — переменные задаются явно, порядок виден в превью:

```css
.folder {
  --icon-color-1: var(--color-folder-bg);
  --icon-color-2: var(--color-folder-accent);
}
```