• 图标组件


    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.下载自定义图标库资源

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