Icon

我们使用了阿里巴巴矢量图标库:

• 从 http://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=501801 中查找需要用的图标，如icon-add,如果没有找到，则从矢量图标库中选择想要的，然后添加到项目中。

• 如果改动了图标（添加或删除），在上述链接中中找到我的项目，将Font class下所对应的新的链接替换到Icon项目src/style/index.less文件中。

命名

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

• 实心和描线图标保持同名，用 -s 来区分，比如 question-circle(描线) 和 question-circle-s(实心)；

• 命名顺序：[icon名]-[形状可选]-[描线与否]-[方向可选]。

属性

|属性| 说明| 类型|默认值| |---|----|-----|-----| |type|图标的类型，如add、left|string|无| |className|外部传入类，用来补充定义样式，可以改变图标的大小，颜色等|string|无| |color|图标颜色，可以传入任意表示颜色的字符串，如'blue', '#FFF', 'rgb(0,0,0)'|string|无| |size|常用的图标大小,目前有xs,sm,md,lg四个值|string|md| |onClick|点击图标的回调函数|func|()=>{}|

如何使用

使用 <Icon /> 标签声明组件，指定图标对应的 type 属性，示例代码如下:

<Icon type="loading" color="blue" size="sm"/>
<Icon type="close" size="md" color="#6abf47"/>
<Icon type="search" size="lg"/>
<Icon type="setup" className="biggerIcon"/>
<Icon type="empty" className="color-red"/>

注意事项

Icon组件内部样式定义采用的类是 cefc-icon- 的形式，比如cefc-icon-right,所以在组件中使用Icon，并向Icon传入className时，避免 采用cefc-icon-，以免造成样式覆盖。