# Univer Icons 簡介

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

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

---

Univer Icons 是適用於工具列、選單和文件編輯介面的圖示庫。你可以在 React 或 Vue 3 專案中使用，並依需求匯入圖示。



## 選擇整合方式

依照專案使用的框架安裝對應套件。兩個套件使用相同的元件名稱，例如 `CopyIcon` 和 `SearchIcon`。

| 框架    | 套件                    |
| ----- | --------------------- |
| React | `@univerjs/icons`     |
| Vue 3 | `@univerjs/icons-vue` |

## 尋找合適的圖示

開啟[圖示預覽](https://docs.univer.ai/zh-TW/guides/icons/all-icons.md)，依分類瀏覽，或輸入 `copy`、`search` 等英文關鍵字。調整尺寸和顏色，確認效果後點選圖示，即可複製 React 匯入語句。

如果你使用 AI Agent，可以連接 [MCP 服務](https://docs.univer.ai/zh-TW/guides/icons/ai.md)，描述圖示需要表達的操作。AI Agent 會尋找候選圖示，並取得 React 或 Vue 的使用方式。

## 開始使用

- [MCP 服務](https://docs.univer.ai/zh-TW/guides/icons/ai.md)

- [在 React 中整合](https://docs.univer.ai/zh-TW/guides/icons/react.md)

- [在 Vue 中整合](https://docs.univer.ai/zh-TW/guides/icons/vue.md)

- [圖示預覽](https://docs.univer.ai/zh-TW/guides/icons/all-icons.md)

原始碼與問題回報請前往 [dream-num/univer-icons](https://github.com/dream-num/univer-icons)。