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