图标组件(该文档已废弃,仅适用于0.9版本)
1. 说明
图标组件整合了 iconfont, 能够使用 iconfont 中开源免费的图标,大大扩展了系统的图标使用范围,同时也支持上传自定义的图标。
2. 图标库更新流程
要更新图标库需要拥有 iconfont
的项目权限,没有操作权限的可以让拥有操作权限的团队成员添加。
- 登录 iconfont,添加图标时需要规范化图标命名;
- 更新
Font Class
生成新的图标样式链接,链接形如://at.alicdn.com/t/font_1089395_95h9j1chzts.css; - 将项目根目录下
icon.js
中的aliUrl
属性更新为新的图标样式链接; - 执行 yarn icon 命名下载图标文件;
- 引入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';
- 在 iconfont 个人中心新建项目, 调整 FontClass 公共样式前缀和 Font Family
- 选择图标
- 点击 iconfont 右上角购物车按钮,将图标添加至新建立项目
- 生成 Font Class 链接
- 添加用户操作权限