# Интеграция с Vue

> Установка и использование Univer Icons в проектах на Vue 3.

- Human documentation: [https://docs.univer.ai/ru-RU/guides/icons/vue](https://docs.univer.ai/ru-RU/guides/icons/vue)

- Agent Markdown: [https://docs.univer.ai/ru-RU/guides/icons/vue.md](https://docs.univer.ai/ru-RU/guides/icons/vue.md)

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

- Source: [icons/vue.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/vue.ru-RU.mdx)

---

Добавьте Univer Icons в интерфейс Vue 3, затем настройте размер и цвет под окружающие элементы управления.

## Установите пакет

Установите пакет иконок в проект Vue 3:

#### npm

```bash
npm install @univerjs/icons-vue
```

#### pnpm

```bash
pnpm add @univerjs/icons-vue
```

#### yarn

```bash
yarn add @univerjs/icons-vue
```

#### bun

```bash
bun add @univerjs/icons-vue
```

## Добавьте иконку на кнопку

Выберите компонент в [предпросмотре иконок](https://docs.univer.ai/ru-RU/guides/icons/all-icons.md) и импортируйте его по имени. Этот пример добавляет на кнопку копирования иконку и текст.

```vue
<script setup lang="ts">
import { CopyIcon } from '@univerjs/icons-vue'

const emit = defineEmits<{ copy: [] }>()
</script>

<template>
  <button type="button" @click="emit('copy')">
    <CopyIcon aria-hidden="true" />
    <span>Копировать</span>
  </button>
</template>
```

Обработайте событие `copy` в родительском компоненте. Иконка декоративная: видимый текст уже описывает действие.

## Настройте размер и цвет

Иконки наследуют цвет текста, а их размер равен `1em`. Чтобы изменить их отдельно, задайте `fontSize` и `color`:

```vue
<script setup lang="ts">
import { AddImageIcon } from '@univerjs/icons-vue'
</script>

<template>
  <AddImageIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
  />
</template>
```

## Настройте двухцветную иконку

Основной цвет задаётся через `color`, акцентный через `extend.colorChannel1`. Пример использует тёмно-серый и светло-серый:

```vue
<script setup lang="ts">
import { PaintBucketDoubleIcon } from '@univerjs/icons-vue'
</script>

<template>
  <PaintBucketDoubleIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
    :extend="{ colorChannel1: '#d4d4d8' }"
  />
</template>
```

Многоцветные иконки, включая логотипы, могут содержать фиксированные цвета. Эти настройки меняют не все цвета таких иконок.

## Сохраните толщину линий при увеличении

Если линии увеличенной иконки слишком толстые, попробуйте `preserveStrokeWidth`. Поддерживаемые линии сохранят толщину для размера 16 × 16. Залитые фигуры не изменятся. Проверьте результат с помощью настройки линий в предпросмотре.

```vue
<script setup lang="ts">
import { ShapePieIcon } from '@univerjs/icons-vue'
</script>

<template>
  <ShapePieIcon
    aria-hidden="true"
    preserve-stroke-width
    style="font-size: 48px"
  />
</template>
```

## Назовите кнопки без текста

Если вы убираете текст, добавьте кнопке `aria-label="Копировать"` и оставьте `aria-hidden="true"` у иконки. Так программы чтения с экрана смогут озвучить действие.

Чтобы поручить AI Agent выбор иконки и написание кода, подключите [MCP-сервер](https://docs.univer.ai/ru-RU/guides/icons/ai.md).