# 在 Vue 中整合

> 在 Vue 3 專案中安裝和使用 Univer Icons。

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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