32 lines
3.0 KiB
Markdown
32 lines
3.0 KiB
Markdown
|
---
|
|||
|
|
title: SVG-спрайты
|
|||
|
|
description: "Что такое SVG-спрайты и какие проблемы они решают."
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# SVG-спрайты
|
|||
|
|
|
|||
|
|
Что такое SVG-спрайты и какие проблемы они решают.
|
|||
|
|
|
|||
|
|
## Проблема
|
|||
|
|
|
|||
|
|
Иконки в проекте — это десятки и сотни SVG-файлов, которые нужно как-то доставлять в интерфейс. Подход «один `<img>` на иконку» или инлайн SVG в каждом компоненте приводят к трём проблемам:
|
|||
|
|
|
|||
|
|
- **Дублирование.** Инлайн SVG в нескольких компонентах — один и тот же код размазан по проекту. Изменение иконки требует правок в десяти местах.
|
|||
|
|
- **Размер бандла.** Каждый инлайн SVG — полный XML-код, который попадает в JS-бандл. Сотня иконок × средний размер SVG = сотни килобайт, которые браузер парсит как JavaScript, а не как статику.
|
|||
|
|
- **Нет управления цветом.** Инлайн SVG жёстко закрашивает иконку. Сменить цвет по состоянию (`:hover`, `._disabled`) — значит дублировать SVG или городить `currentColor`-хаки в каждом компоненте.
|
|||
|
|
|
|||
|
|
## Решение
|
|||
|
|
|
|||
|
|
SVG-спрайты — это единый файл-контейнер, в который собираются все иконки проекта. В коде используется один React-компонент `<SvgSprite icon="name"/>`, а браузер загружает спрайт как статику — один раз, с кешированием.
|
|||
|
|
|
|||
|
|
Что дают SVG-спрайты:
|
|||
|
|
|
|||
|
|
- **Один источник.** Каждая иконка — один SVG-файл в `src/shared/sprites/`. Обновил файл — иконка обновилась везде.
|
|||
|
|
- **Лёгкий бандл.** Спрайт отдаётся как статический файл из `public/`, не попадает в JavaScript. Типы имён иконок генерируются автоматически — автодополнение работает без ручных описаний.
|
|||
|
|
- **Цвет через CSS.** При сборке цвета в SVG заменяются на CSS-переменные. Цвет иконки меняется через `color` родителя или через переменные `--icon-color-N` — как любой другой стиль.
|
|||
|
|
|
|||
|
|
## Состав раздела
|
|||
|
|
|
|||
|
|
- [Настройка](./svg-sprites-setup.md) — подключение пакета, конфигурация, первая генерация.
|
|||
|
|
- [Использование](./svg-sprites-usage.md) — добавление иконок, компонент `<SvgSprite/>`, управление цветом.
|