# Icon 图标
概述
Icon 图标，First UI字体图标库，可自定义扩展。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "图标",
"usingComponents": {
"fui-icon": "/components/firstui/fui-icon/fui-icon"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-icon": "components/firstui/fui-icon/fui-icon"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 name 属性设置展示对应的图标。
<fui-icon name="addfriends"></fui-icon>
<fui-icon name="addfriends-fill"></fui-icon>
1
2
2
修改大小
通过 size 属性修改图标大小，单位默认为rpx。
<fui-icon name="addfriends" size="{{60}}"></fui-icon>
<fui-icon name="addfriends-fill" size="{{60}}"></fui-icon>
1
2
2
修改颜色
通过 color 属性修改图标颜色。
<fui-icon name="addfriends" color="#465CFF"></fui-icon>
<fui-icon name="addfriends-fill" color="#465CFF"></fui-icon>
1
2
2
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| name | String | 图标名称 | - | - |
| size | Number,String | 图标大小 | 64 | - |
| unit | String | 图标大小单位 | rpx | - |
| color | String | 图标颜色 | #333333 | - |
| fontWeight | Number, String | 图标字重 | normal | - |
| disabled | Boolean | 是否禁用点击 | false | - |
| params | Number, String | 自定义参数 | 0 | - |
| customPrefix V1.5.0+ | String | 自定义图标，定义字体class名称 | - | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| bind:click | 点击图标时触发 | event.detail = { params:自定义参数 } |
# 自定义图标（V1.5.0+）
注意
以下所有说明都是基于 阿里图标库 (opens new window)进行扩展，其他图标库同理，明白原理即可方便扩展。
# 自定义图标步骤说明
1、获取图标
访问 阿里图标库 (opens new window)，搜索选择需要的图标添加至购物车（然后添加至自己项目中）或者自行上传svg图标至项目中，下载获取字体文件。
2、将 iconfont.css 放到项目根目录 static 下，后缀名改名为.wxss。
3、打开 iconfont.wxss ,修改 @font-face 如下,注意 src 字体文件的引用改为 base64，将 iconfont.ttf文件转为base64进行引入。
/* 自定义扩展图标，结合fui-icon组件使用 */
@font-face {
font-family: fuicustomicons;
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
}
.fui-custom-icon {
font-family: "fuicustomicons" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
.icon-fabulous:before {
content: "\e704";
}
.icon-collection:before {
content: "\e705";
}
.icon-comment:before {
content: "\e706";
}
.icon-forward:before {
content: "\e707";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
4、上面wxss默认的 font-family 都为 iconfont，可自行更换，确保你使用的字体名字（font-family）足够特殊。
5、全局引入使用自定义图标。
在项目根目录的 app.wxss 中，引入上述的 iconfont.wxss，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在有效内容中的最前面
/*app.wxss*/
/* 引入自定义扩展图标 样式文件*/
@import './static/iconfont.wxss';
1
2
3
2
3
6、使用 custom-prefix 和 name 属性自定义图标，取值对标css文件。
<fui-icon custom-prefix="fui-custom-icon" name="icon-fabulous"></fui-icon>
1
示例预览
# 资源下载
VIP用户可下载图标的设计文件和svg文件 。