templates/nextjs-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2358da397d8bcd3b960c60053aa42ae558b415b
nextjs-template/ai/nextjs-style-guide/applied/svg-sprites/svg-sprites-usage.md
S.Gromov f2358da397 docs: добавить стайлгайд nextjs-style-guide в репозиторий 
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
2026-04-30 19:32:10 +03:00

1.9 KiB
Raw Blame History

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);
}