cefc-ui-icon

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-，以免造成样式覆盖。