gromov/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
docs/canons/style-guide/applied/svg-sprites/svg-sprites-usage.md
S.Gromov 86ab6bc8fd feat: добавить хаб документаций 
- добавлен React/Vite-лендинг с карточками документаций
- добавлена генерация корневого llms.txt из конфига документов
- добавлена сборка SLM Design через VitePress
- добавлены Dockerfile, Caddyfile и Gitea CI/CD
- настроены контекстные Link headers для llms.txt
2026-05-13 10:12:31 +03:00

1.9 KiB
Raw Permalink 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);
}