S.Gromov
86ab6bc8fd
- добавлен React/Vite-лендинг с карточками документаций - добавлена генерация корневого llms.txt из конфига документов - добавлена сборка SLM Design через VitePress - добавлены Dockerfile, Caddyfile и Gitea CI/CD - настроены контекстные Link headers для llms.txt
57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
---
|
||
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);
|
||
}
|
||
```
|