AiIconGiga

AiIconGiga — иконка-логотип GigaChat из набора AI Components. Рендерится как <svg> и переиспользуется в составных компонентах стриминга. Поддерживает монохромный вариант (neutral) и два брендовых градиента — для тёмного и светлого фона.

Когда использовать

• Маркировка GigaChat-сценариев в стриминг-компонентах (заголовки чатов, превью генераций, аватары ассистента).
• Брендовый акцент рядом с AI-функциональностью.

Когда не нужен

• Произвольная интерфейсная иконка:
  • используйте @cloud-ru/ds-icons.
• Кликабельный триггер:
  • оборачивайте AiIconGiga в @cloud-ru/ds-button или ставьте обработчик на родителя.

Анатомия

Variant (default neutral)

• neutral — монохром через currentColor (по умолчанию вторичный текстовый токен). Цвет наследуется от родителя.
• logoDark — брендовый зелёно-голубой градиент, рассчитанный на тёмный фон.
• logoLight — брендовый градиент, рассчитанный на светлый фон.

Size (default 80)

Квадратный размер в пикселях. Глиф логотипа центрирован с отступом 12.5% от размера бокса.

Установка

pnpm add @cloud-ru/ds-ai-icon-giga

import { AiIconGiga } from '@cloud-ru/ds-ai-icon-giga'

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

Neutral

import { AiIconGiga, VARIANT } from '@cloud-ru/ds-ai-icon-giga';

export function Neutral() {
  return <AiIconGiga variant={VARIANT.Neutral} />;
}

Branded

import { AiIconGiga, VARIANT } from '@cloud-ru/ds-ai-icon-giga';

export function Branded() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <AiIconGiga variant={VARIANT.LogoLight} />
      <AiIconGiga variant={VARIANT.LogoDark} />
    </div>
  );
}

Sizes

import { AiIconGiga } from '@cloud-ru/ds-ai-icon-giga';

export function Sizes() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <AiIconGiga size={24} />
      <AiIconGiga size={48} />
      <AiIconGiga size={80} />
    </div>
  );
}

Props

Types

AiIconGigaProps

Unions

AiIconGigaVariant

Storybook

Figma