# 在 Vue 中集成

> 在 Vue 3 项目中安装和使用 Univer Icons。

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [icons/vue.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/vue.zh-CN.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/zh-CN/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/zh-CN/guides/icons/ai.md)。