---
title: Icon-图标
nav:
  order: 3
  title: 桌面组件
  path: /design
group:
  order: 2
  path: /universal
  title: 通用组件
---

语义化的矢量图形。

基于 iconify，可离线使用，稳定性好，可按需构建图标 svg json 文件。

## 图标列表

请注意，iconName 只支持驼峰写法。可自定义导出需要的图标，并使用 Icon.addCollection(iconifyJSON:iconify 规范的图标 JSON,provider:自定义图标库名称)注册自定义图标库。

<code src="./demos/icons.tsx" />

## 自定义图标

在 Icon 组件中，我们支持通过 iconifyJSON 注册使用自定义图标（需要特别注意的是，图标命名空间必须是小写字母、数字或’-‘，请勿使用大写字母、中文或其他特殊字符，可能导致注册失败）。我们可以通过[iconify 官方](https://icon-sets.iconify.design/)提供的海量图标直接导出你想要的图标。

如果你使用的是 iconfont，可以通过[tampermonkey](https://www.tampermonkey.net)脚本[tampermonkey-iconfont-iconify](https://github.com/yee94/tampermonkey-iconfont-iconify)实现 iconfont 图标到 iconify.json。

<code src="./demos/userDefinedIcon.tsx" />

## 旋转

旋转图标

<code src="./demos/spin.tsx" />

## API

### 通用图标

| 参数      | 说明                                       | 类型                                                                                    | 默认值 |
| --------- | ------------------------------------------ | --------------------------------------------------------------------------------------- | ------ |
| className | 设置图标的样式名                           | string                                                                                  |
| spin      | 是否有旋转动画                             | boolean                                                                                 | false  |
| style     | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties                                                                           |
| iconName  | 图标名称                                   | `string`                                                                                |
| onClick   | 点击事件                                   | React.MouseEventHandler`<HTMLDivElement>`                                               | ()=>{} |
| rotate    | 图标旋转角度（IE9 无效）                   | `number`                                                                                | -      |
| provider  | 自定义图标库名称                           | `string`（图标命名空间必须是小写字母、数字或’-‘，请勿使用大写字母、中文或其他特殊字符） | -      |

### Icon.addCollection(iconifyJSON,provider):boolean

用于注册自定义图标库，返回 true 则表示注册成功，false 则表示失败。如果遇到失败，请检查：

1. provider 图标命名空间必须是小写字母、数字或’-‘，请勿使用大写字母、中文或其他特殊字符
2. iconifyJSON 中图标命名也必须是小写字母、数字或’-‘，请勿使用大写字母、中文或其他特殊字符

- `iconifyJSON:iconify规范的图标JSON`
- `provider:自定义图标库名称`