• 图标组件

    1. 说明

    图标组件整合了 iconfont, 能够使用 iconfont 中开源免费的图标，大大扩展了系统的图标使用范围，同时也支持上传自定义的图标。

    2. 图标库更新流程

    要更新图标库需要拥有 iconfont 的项目权限，没有操作权限的可以让拥有操作权限的团队成员添加。

    1. 登录 iconfont，添加图标时需要规范化图标命名；
    2. 更新 Font Class 生成新的图标样式链接，链接形如：//at.alicdn.com/t/font_1089395_95h9j1chzts.css；
    3. 将项目根目录下 icon.js 中的 aliUrl 属性更新为新的图标样式链接；
    4. 执行 yarn icon 命名下载图标文件；
    5. 引入Icons组件，设置type属性；

    对于 type 属性的值，比如，hzero-icon-edit，hzero-icon-是公共命名，edit是图标名称，所以 type=“edit”；

    3. API

    参数 说明 类型 默认值 必输
    type 图标名称，如果图标名称为 hzero-icon-edit, type=“edit” string 无 否
    size 图标大小，以px为单位 string 12 是
    color 图标颜色，16进制或rgb/rgba形式 string 无 否
    className class 属性 string 无 否
    title tooltip提示文字，设置该属性将自动使用Tooltip string 无 否
    tipProps Tooltip其余属性 object 无 否

    4. 示例

    import Icons from 'components/Icons';

<Icons type="edit" size="16" color="#f5f5f5" title="编辑" />

    5. 自定义图标库

    hzero 有属于自己的图标库，其他产品如要使用自定义的图标库，需要在 iconfont 中创建图标库。

    创建完图标库之后还需要找到 Icons 组件中 Status.js 文件修改对应图标库的前缀：

    // 图标 FontClass/Symbol 前缀，如果在 iconfont 上定义的前缀为test-demo-，取test-demo
export const ORIGIN_ICON_NAME = 'test-demo';