# 在 React 中集成

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

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

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

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [icons/react.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/react.zh-CN.mdx)

---

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

## 安装图标包

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

#### npm

```bash
npm install @univerjs/icons
```

#### pnpm

```bash
pnpm add @univerjs/icons
```

#### yarn

```bash
yarn add @univerjs/icons
```

#### bun

```bash
bun add @univerjs/icons
```

## 在按钮中添加图标

在[图标预览](https://docs.univer.ai/zh-CN/guides/icons/all-icons.md)中找到需要的组件，使用组件名导入。下面为复制按钮添加图标，并保留文字说明。

```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 服务](https://docs.univer.ai/zh-CN/guides/icons/ai.md)。