在 Vue 中整合

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

將 Univer Icons 加入 Vue 3 介面，再調整尺寸和顏色，讓圖示與周圍的控制項保持一致。

安裝圖示套件

在 Vue 3 專案中安裝對應的圖示套件：

Shell

pnpm add @univerjs/icons-vue

Shell

npm install @univerjs/icons-vue

Shell

yarn add @univerjs/icons-vue

Shell

bun add @univerjs/icons-vue

在按鈕中加入圖示

在圖示預覽中找到所需元件，以元件名稱匯入。以下為複製按鈕加入圖示，並保留文字說明。

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 服務。

你覺得這篇文檔如何？