在 React 中集成

在 React 项目中安装和使用 Univer Icons。

将 Univer Icons 添加到 React 界面，再调整尺寸和颜色，使图标与周围的控件保持一致。

安装图标包

在 React 项目中安装对应的图标包：

Shell

pnpm add @univerjs/icons

Shell

npm install @univerjs/icons

Shell

yarn add @univerjs/icons

Shell

bun add @univerjs/icons

在按钮中添加图标

在图标预览中找到需要的组件，使用组件名导入。下面为复制按钮添加图标，并保留文字说明。

TSX

import { CopyIcon } from '@univerjs/icons'export function CopyButton({ onCopy }: { onCopy: () => void }) {  return (    <button type="button" onClick={onCopy}>      <CopyIcon aria-hidden="true" />      <span>复制</span>    </button>  )}

通过 onCopy 传入你的复制逻辑。按钮上的文字已经说明操作，因此将图标标记为装饰内容，避免屏幕阅读器重复朗读。

调整尺寸和颜色

图标默认继承文字颜色，尺寸为 1em，会跟随所在位置的字号变化。需要单独调整时，设置 fontSize 和 color：

TSX

import { AddImageIcon } from '@univerjs/icons'export function ImageToolIcon() {  return (    <AddImageIcon      aria-hidden="true"      style={{ fontSize: 20, color: '#27272a' }}    />  )}

设置双色图标的配色

双色图标可以分别设置主色和强调色：color 控制主色，extend.colorChannel1 控制强调色。下面使用深灰主色搭配浅灰强调色：

TSX

import { PaintBucketDoubleIcon } from '@univerjs/icons'export function FillToolIcon() {  return (    <PaintBucketDoubleIcon      aria-hidden="true"      style={{ fontSize: 20, color: '#27272a' }}      extend={{ colorChannel1: '#d4d4d8' }}    />  )}

品牌标志等多色图标可能带有固定配色，这些设置不会替换其中的所有颜色。

放大图标时保持描边宽度

如果图标放大后线条显得过粗，可以尝试 preserveStrokeWidth，让支持的描边保持在 16 × 16 尺寸下的宽度。这个属性不影响填充图形。你可以先在预览中切换“保持描边”，确认效果后再使用。

TSX

import { ShapePieIcon } from '@univerjs/icons'export function ShapeToolIcon() {  return (    <ShapePieIcon      aria-hidden="true"      preserveStrokeWidth      style={{ fontSize: 48 }}    />  )}

为纯图标按钮添加名称

如果去掉按钮上的文字，请在按钮上添加 aria-label="复制"，并保留图标上的 aria-hidden="true"，让屏幕阅读器能够读出操作名称。

需要 AI Agent 帮你选择图标并生成集成代码时，可以连接 MCP 服务。

你觉得这篇文档如何？