NextJS Style Guide

Appearance

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

Работа с SVG-иконками через сгенерированный компонент <SvgSprite/>. Установка пакета — Установка и настройка.

Шаги ​

  1. Положить SVG в папку спрайта:

    text
    src/shared/sprites/icons/new-icon.svg

  2. Импортировать компонент. Компонент <SvgSprite/> генерируется пакетом вместе с типами имён иконок — автодополнение работает без ручных описаний:

    tsx
    import { SvgSprite } from 'ui/svg-sprite'

<SvgSprite icon="new-icon" />

  3. Посмотреть и пощупать иконку — в превью. Пакет генерирует HTML-превью рядом со спрайтом (public/sprites/icons.preview.html). Там виден набор иконок, имена и поведение цвета.

Управление цветом ​

При сборке цвета в SVG заменяются на CSS-переменные --icon-color-N. Управление — через обычный CSS родителя.

Моно-иконка наследует color родителя (--icon-color-1 по умолчанию currentColor):

css
.button {
  color: var(--color-primary);
}

Точечное переопределение — через переменную:

css
.icon-danger {
  --icon-color-1: var(--color-danger);
}

Мульти-иконка — переменные задаются явно, порядок виден в превью:

css
.folder {
  --icon-color-1: var(--color-folder-bg);
  --icon-color-2: var(--color-folder-accent);
}