templates/nextjs-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2358da397d8bcd3b960c60053aa42ae558b415b
nextjs-template/ai/nextjs-style-guide/applied/svg-sprites/svg-sprites-intro.md
S.Gromov f2358da397 docs: добавить стайлгайд nextjs-style-guide в репозиторий 
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
2026-04-30 19:32:10 +03:00

3.0 KiB
Raw Blame History

title, description
title description
SVG-спрайты Что такое 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 — как любой другой стиль.

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

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