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

你覺得這篇文檔如何？