• 图标组件

    1. 说明

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

    需使用 hzero-front@1.1.1及以上版本，hzero-front-runtime@1.1.2及以上版本

    注意：更新hero-front@1.1.1后，如若在全量启动或启动子模块时出现 Module not font: Can't '@/assets/icons' 的错误的话，请在根目录或子模块的src中创建assets/icons目录。

    2. 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 无 否

    3. 示例

    import Icons from 'components/Icons';

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

    4. 图标库使用流程

    首先需要在iconfont上创建图标库，创建图标库后可以添加项目成员(需要注册iconfont账户)。

    4.1 图标库更新

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

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

    4.2 项目扩展图标库

    1. 自定义图标库

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

    2. 使用自定义的图标库

    从 hzero-front@1.1.1 开始Icons组件支持整合自定义的图标库。

    1.创建icons目录

    在项目根目录下的src/assets下创建一个icons目录，用于存放图标资源。

    注意：子模块使用时，也需要创建icons目录，子模块的 alias.js/babelrc.js 中的 @别名配置请保持和项目根目录的配置一致。

    2.配置环境变量

    3.下载自定义图标库资源

    参照上文 图标库更新 的内容进行操作