Перейти к основному содержимому

SVG и иконки

Когда нужен SVG pipeline​

Build pipeline необходим, если хотя бы одно из условий верно:

  • дизайн предоставляет кастомные SVG
  • планируется ребрендинг или темизация
  • иконки используются в нескольких подпроектах

Pipeline: что должно получиться​

MUST​

  • единый SVG-спрайт
  • типизированный список имён иконок (icons.d.ts)
  • общий Icon компонент

SHOULD​

  • оптимизация SVG через SVGO
  • конвертация в React-компоненты через SVGR (или аналог)

Требования к исходникам​

MUST​

  • все SVG лежат в одной директории
  • имена файлов совпадают с именами в дизайне и используют kebab-case
  • есть viewBox, иконка масштабируется без обрезки
  • для монохромных иконок используется currentColor

SHOULD​

  • единый базовый размер (например, 24x24)
  • одинаковые правила для stroke/linecap/linejoin

FORBIDDEN​

  • inline-стили внутри SVG
  • жёстко заданные width/height без viewBox
  • растровые вставки (<image> внутри SVG)

Цвет и стилизация​

MUST​

  • Монохромные иконки наследуют цвет через currentColor.
  • Многоцветные иконки используют токены (CSS variables), а не прямые значения.

✅ Хорошо (currentColor)

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="..." />
</svg>

✅ Хорошо (token)

<svg viewBox="0 0 24 24">
  <path fill="var(--color-icon-accent)" d="..." />
</svg>

❌ Плохо

<path fill="#ff0000" d="..." />

Анимации и inline-SVG​

SHOULD​

  • Для анимаций использовать Icon компонент и CSS-анимации.

Допускается​

  • Inline-SVG, если анимацию нельзя реализовать иначе (например, сложные keyframes по путям).

Использование в коде​

✅ Хорошо

<Icon name="arrow-left" size="m" />
<Icon name="warning" color="var(--color-icon-warning)" />

❌ Плохо

import ArrowLeft from './icons/arrow-left.svg';

<ArrowLeft width={16} height={16} />

Доступность​

MUST​

  • Декоративные иконки скрыты от скринридеров.
  • Информативные иконки имеют доступное имя.

✅ Декоративная иконка

<Icon name="chevron-right" aria-hidden />

✅ Информативная иконка

<Icon name="warning" aria-label="Предупреждение" />

Исключение: внешние библиотеки иконок​

Если design-система полностью опирается на внешнюю библиотеку (Material Icons, Font Awesome и т.п.), отдельный SVG pipeline может не требоваться.

MUST​

  • всё равно использовать единый Icon компонент как оболочку
  • не вставлять inline-SVG без причины (например, анимация)

Добавление новой иконки (процедура)​

  1. Добавить SVG в директорию исходников с корректным именем.
  2. Проверить viewBox и currentColor.
  3. Запустить сборку иконок.
  4. Использовать только Icon компонент в UI.

Процедуры контроля (Code Review)​

Ревьюер должен убедиться, что:​

  • иконки используются через Icon компонент
  • новые SVG соответствуют требованиям (viewBox, currentColor, без inline-styles)
  • inline-SVG применяется только с обоснованием