---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.5
  - property: og:type
    content: article
  - property: article:section
    content: Платформа плагинов
  - property: og:title
    content: StatusIcon
  - property: article:tag
    content: Техническая инструкция
alternate:
  - https://yandex.ru/support/tracker/en/plugins/components/status-icon.md
  - https://yandex.ru/support/tracker/ru/plugins/components/status-icon.md
  - href: ru/plugins/components/status-icon.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/ru/llms.txt

[← К списку компонентов](https://yandex.ru/support/tracker/ru/plugins/components/index.md)

# StatusIcon {#status-icon}

Отображает иконку статуса задачи Трекера. Каждому типу статуса соответствует отдельная иконка и цвет. Неизвестные значения статуса не вызывают ошибку — компонент отображает иконку со знаком вопроса.

## Использование {#usage}

```tsx
import {StatusIcon} from '@weavix/tracker-components';

<StatusIcon statusType="new" />
<StatusIcon statusType="inProgress" />
<StatusIcon statusType="done" />
```

## Поддерживаемые статусы {#supported-statuses}

`new` · `inProgress` · `paused` · `done` · `cancelled` · `unknown` · произвольная строка (отображается со знаком вопроса)

## Из Tracker API {#tracker-api}

Требует разрешение `"tracker:issues:read"` в `manifest.json` плагина:

```json
{
    "permissions": {
        "data": ["tracker:issues:read"]
    }
}
```

```tsx
import {StatusIcon} from '@weavix/tracker-components';

const status = await trackerApi.v3.get['/issues/{id}/{field}']({
    pathParams: {
        id: 'ISSUEKEY-1',
        field: 'status',
    },
});

<StatusIcon
    statusType={status.data.key}
    title={status.data.display}
/>
```

## Пример — статус рядом с названием задачи {#example}

```tsx
import {StatusIcon} from '@weavix/tracker-components';

export const IssueRow = ({issue}: {issue: {statusType: string; summary: string}}) => (
    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
        <StatusIcon statusType={issue.statusType} size={16} />
        <span>{issue.summary}</span>
    </div>
);
```

## Свойства {#props}

| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
| `statusType` | `string` | — | Тип статуса задачи. Поддерживаемые значения перечислены выше |
| `size` | `number` | `16` | Размер иконки в пикселях |
| `title` | `string` | — | Читаемое название статуса для скринридеров. Если не передан — иконка помечается как декоративная (`aria-hidden`) |
| `className` | `string` | — | Дополнительный CSS-класс иконки |
| `containerClassName` | `string` | — | Дополнительный CSS-класс внешнего контейнера |