gromov/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bdb99ade6284f6be04bb077e246b9086b10f9711
docs/projects/nextjs-style-guide/canons/applied/svg-sprites/svg-sprites-intro.md
S.Gromov bdb99ade62
All checks were successful
CI/CD Pipeline / build (push) Successful in 39s
Details
CI/CD Pipeline / docker (push) Successful in 1m30s
Details
CI/CD Pipeline / deploy (push) Successful in 8s
Details
refactor: перенести сборку в проекты 
- перенесены каноны и VitePress-конфиги в projects/<slug>

- добавлены корневой и проектные build.ts для сборки артефактов

- добавлены shared-библиотеки сборки в projects/_shared/lib

- обновлены CI, Dockerfile, package.json, gitignore и README

- удалена сборка frontend-агента
2026-05-22 19:07:10 +03:00

3.1 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/>, управление цветом.