在 Vue 中集成
在 Vue 3 项目中安装和使用 Univer Icons。
将 Univer Icons 添加到 Vue 3 界面，再调整尺寸和颜色，使图标与周围的控件保持一致。
安装图标包
在 Vue 3 项目中安装对应的图标包：
Shell
pnpm add @univerjs/icons-vueShell
npm install @univerjs/icons-vueShell
yarn add @univerjs/icons-vueShell
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 服务。
你觉得这篇文档如何？