docs/projects/nextjs-style-guide/canons/applied/svg-sprites/svg-sprites-usage.md

title, description, keywords

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

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

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

Шаги

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

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

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

   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):

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

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

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

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

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