# 在 React 中整合

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

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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