gromov/image-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0faa8b9d2d115021147fce35b50a2fbbd72ae5d8
image-platform/ai/nextjs-style-guide/applied/svg-sprites/svg-sprites-usage.md
S.Gromov 2c88cc3eca chore: добавить frontend правила и шаблоны SLM 
- добавлены frontend инструкции AGENTS и локальный style guide
- актуализированы SLM templates под Vite React и слой infra
- добавлены шаблоны component, infra и factory-based business
- нормализованы примеры документации под alias infra
2026-05-05 14:05:43 +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);
}