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 — как любой другой стиль.

Состав раздела

• Настройка — подключение пакета, конфигурация, первая генерация.
• Использование — добавление иконок, компонент <SvgSprite/>, управление цветом.