# @cloud-ru/ds-ai-icon-giga

> Иконка-логотип GigaChat в монохроме и брендовых градиентах для тёмного и светлого фона.

Docs: /snack-v2/components/ai-icon-giga/

## Установка

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

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

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

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

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

## API

### AiIconGiga
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no | Доп. класс корня. |
| `data-test-id` | `string` | `ai-icon-giga` | no |  |
| `size` | `number` | `80` | no | Размер иконки в px (квадрат). По умолчанию `80`. |
| `variant` | `logoDark \| logoLight \| neutral` | `neutral` | no | Вариант логотипа GigaChat: - `neutral` — монохром (`currentColor`, по умолчанию вторичный текстовый токен); - `logoDark` — брендовый градиент для тёмного фона; - `logoLight` — брендовый градиент для светлого фона. По умолчанию `neutral`. |

#### Related types
- `AiIconGigaVariant` = `logoDark | logoLight | neutral`

## Примеры

### Branded

```tsx
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>
  );
}
```

### Neutral

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

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

### Sizes

```tsx
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>
  );
}
```