---
name: Icon
title: 图标
group: Iconfont
---

语义化的矢量图形。

## 图标的命名规范

我们为每个图标赋予了语义化的命名，命名规则如下:

- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；
- 命名顺序：`[icon名]-[形状可选]-[描线与否]-[方向可选]`。

## 如何使用

使用 `<XIcon />` 标签声明组件，指定图标对应的 `type` 属性。

## 示例

{% exCode "DataDisplay/XIcon/index.js" %}
{% exView "data-display/icon" %}

## 图标库

{% exCode "DataDisplay/XIcon/index-example.js" %}
{% exView "data-display/icon-example" %}

## API

| 成员        | 说明           | 类型         | 默认值       |
|------------|----------------|-----------|---------------|
| iconset | 图标组(`className`开头部分) | string | `xicon` |
| type    | 内置 icon 名称或自定义Element	  | String/React.Element  | - |
| size    | 图标大小	  | String  | - |
| spin    |  是否有旋转动画(`type = loading`默认开启)  | boolean  | false |
| color    | 图标颜色`hex/rgba`	  | string  | - |
| className | 样式类名 | string | - |

## 后续集成

图标组件使用 [iconfont.cn]('http://iconfont.cn)。