Icons

Пакет экспортирует сгенерированные компоненты *SVG, сгруппированные по семи подпутям, вспомогательный Sprite для подключения спрайтов интерфейсных групп и фабрику createThemedIcon для собственных иконок, переключающихся по теме.

Группы

• System — системный интерфейсный набор: базовые действия, навигация, состояния. Наследует цвет через currentColor.
• Product — продуктовые сущности и действия (файлы, таблицы, соцсети, MKP/LKP). Наследует цвет через currentColor.
• Web — веб-тематика: облачная инфраструктура, HR-портал, AI, страницы решений. Наследует цвет через currentColor.
• Flags — флаги стран, цвет сохраняется как в исходном SVG.
• Logos — логотипы брендов и сервисов, переключаются между Light/Dark темой автоматически.
• Services — иконки облачных сервисов. Наследует цвет через currentColor.
• Extensions — иконки расширений файлов. Наследует цвет через currentColor.

Установка

pnpm add @cloud-ru/ds-icons

Корневой @cloud-ru/ds-icons не экспортирует ни одной иконки — только тип ISvgIconProps и фабрику createThemedIcon. Каждая иконка импортируется исключительно через свой подпуть; так символ достижим ровно из одного места, и IDE предлагает единственный, канонический вариант автоимпорта, а не выбор между корнем и подпутём.

import { ISvgIconProps, createThemedIcon } from '@cloud-ru/ds-icons'
import { SearchSVG } from '@cloud-ru/ds-icons/interface/system'
import { RussiaSVG } from '@cloud-ru/ds-icons/flags'
import { CloudLogo } from '@cloud-ru/ds-icons/logos'

Подробности и полный каталог иконок по каждой группе — на её отдельной странице (см. «Группы» выше).

Примеры использования

Размер

import { CheckSVG, PlusSVG, SearchSVG, TrashSVG } from '@cloud-ru/ds-icons/interface/system';

export function Sizes() {
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
      <SearchSVG size={16} aria-label='Поиск 16' />
      <CheckSVG size={20} aria-label='Готово 20' />
      <PlusSVG size={24} aria-label='Добавить 24' />
      <TrashSVG size={32} aria-label='Удалить 32' />
    </div>
  );
}

Цвет

import { TrashSVG } from '@cloud-ru/ds-icons/interface/system';

import styles from './Color.module.scss';

export function Color() {
  return (
    <div className={styles.row}>
      <span className={styles.main}>
        <TrashSVG size={24} aria-label='Основной цвет' />
      </span>
      <span className={styles.accent}>
        <TrashSVG size={24} aria-label='Акцентный цвет' />
      </span>
      <span className={styles.critical}>
        <TrashSVG size={24} aria-label='Критический цвет' />
      </span>
    </div>
  );
}

Флаг

import { RussiaSVG } from '@cloud-ru/ds-icons/flags';

export function Flag() {
  return <RussiaSVG size={32} aria-label='Флаг России' />;
}

Логотип с переключением темы

import { CloudLogo } from '@cloud-ru/ds-icons/logos';

// Логотип сам переключает Light/Dark исполнение по активной теме DS —
// отдельного пропа не требуется, достаточно быть внутри провайдера темы.
export function ThemedLogo() {
  return <CloudLogo size={40} aria-label='Cloud.ru' />;
}

Свои тематические иконки

Если нужен свой логотип (например, бренд компании) в светлом и тёмном исполнении, собери его фабрикой createThemedIcon из корня пакета. Она принимает два готовых SVG и возвращает компонент, который сам переключает вариант по активной теме DS и ведёт себя как штатная иконка — проп size, сохранение соотношения сторон, data-test-id.

createThemedIcon

import { createThemedIcon } from '@cloud-ru/ds-icons';

// Свой логотип в двух исполнениях. createThemedIcon собирает из них компонент,
// который сам выбирает вариант по активной теме DS и ведёт себя как штатная иконка
// (проп size, сохранение соотношения сторон, data-test-id).
const AcmeLogo = createThemedIcon({
  testId: 'acme-logo',
  light: {
    nativeWidth: 24,
    nativeHeight: 24,
    children: (
      <>
        <rect width={24} height={24} rx={6} fill='#1A1A1A' />
        <path d='M7 16 12 7l5 9z' fill='#FFFFFF' />
      </>
    ),
  },
  dark: {
    nativeWidth: 24,
    nativeHeight: 24,
    children: (
      <>
        <rect width={24} height={24} rx={6} fill='#FFFFFF' />
        <path d='M7 16 12 7l5 9z' fill='#1A1A1A' />
      </>
    ),
  },
});

export function CustomThemedIcon() {
  return <AcmeLogo size={48} aria-label='Логотип Acme' />;
}

Sprite

Иконки interface/system, interface/product, interface/web, services и extensions рендерятся через SVG-спрайт: спрайт монтируется в документ один раз (в корне приложения), а каждая иконка ссылается на его символ через <use href="#...">. Пока символа в DOM нет — спрайт не смонтирован или не успел загрузиться, — иконка рендерит собственный инлайн-fallback и переключается на <use> автоматически; отсутствие спрайта — штатный режим без ошибок и предупреждений.

Подключение (Sprite / SpriteFromUrl / SpriteIcon), модель fallback-first и сценарии для Next.js, root-приложения и микрофронтов — на отдельной странице Sprite.

Props

Отдельные иконки (SearchSVG и др.) используют тип ISvgIconProps (className, size, атрибуты SVG) — см. packages/icons/src/types.ts. Props компонентов Sprite / SpriteIcon / SpriteFromUrl — на странице Sprite.

Figma