website/plasma-ui-docs/docs/components/Icon.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/components/Icon.mdx

73 строки2 KB

Ivan Kudryavtsev

docs: fix links in docs

10 май 2023, 14:26

10 май 2023, 14:2679ccbca

---
id: icon
title: Icon
---

import { StorybookLink } from '@site/src/components';

# Icon
SVG-пиктограммы. Могут быть монохромными или цветными.

<StorybookLink name="Icon" />

## Использование
Установите пакет `@salutejs/plasma-icons`:

```bash
npm install @salutejs/plasma-icons
```
Используйте именной импорт.
Например, чтобы в проекте появилась иконка `download`, сделайте импорт `IconDownload`:

```tsx title="App.tsx"
import { IconDownload } from '@salutejs/plasma-icons';

export default function App() {
    return (
        <IconDownload />
    );
}
```

## Размеры
Большинство иконок создавались с определенными размерами и используются только с ними.

### [Список иконок](https://bit.ly/3ODTs7F) XS16

```tsx live
import React from 'react';
import { IconPlus } from '@salutejs/plasma-icons';

export function App() {
    return (
        <IconPlus size="xs" />
    );
}
```

### [Список иконок](https://bit.ly/3LhwBwC) S24

```tsx live
import React from 'react';
import { IconHeartStroke } from '@salutejs/plasma-icons';

export function App() {
    return (
        <IconHeartStroke size="s" />
    );
}
```

## Пользовательский цвет

```tsx live
import React from 'react';
import { IconHeartStroke } from '@salutejs/plasma-icons';
import { critical } from '@salutejs/plasma-tokens';

export function App() {
    return (
        <IconHeartStroke color={critical} />
    );
}
```