FirstUI UNI（选项式API）版

# Icon 图标

概述

Icon 图标，First UI字体图标库，可自定义扩展。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5 PC 快手小程序 钉钉小程序
✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
	components:{
		fuiIcon
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
基础使用

通过 name 属性设置展示对应的图标。

<fui-icon name="addfriends"></fui-icon>
<fui-icon name="addfriends-fill"></fui-icon>
1
2
/* 字节（头条）小程序组件内不能引入字体，需要在页面中条件编译引入 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: 'fuiFont';
	src: url("~@/components/firstui/fui-icon/fui-icon.ttf") format("truetype");
}
/* #endif */
1
2
3
4
5
6
7
修改大小

通过 size 属性修改图标大小，单位默认为rpx。

<fui-icon name="addfriends" :size="60"></fui-icon>
<fui-icon name="addfriends-fill" :size="60"></fui-icon>
1
2
/* 字节（头条）小程序组件内不能引入字体，需要在页面中条件编译引入 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: 'fuiFont';
	src: url("~@/components/firstui/fui-icon/fui-icon.ttf") format("truetype");
}
/* #endif */
1
2
3
4
5
6
7
修改颜色

通过 color 属性修改图标颜色。

<fui-icon name="addfriends" color="#465CFF"></fui-icon>
<fui-icon name="addfriends-fill" color="#465CFF"></fui-icon>
1
2
/* 字节（头条）小程序组件内不能引入字体，需要在页面中条件编译引入 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: 'fuiFont';
	src: url("~@/components/firstui/fui-icon/fui-icon.ttf") format("truetype");
}
/* #endif */
1
2
3
4
5
6
7

# 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 String 自定义图标，定义字体class名称 - -

# Events

事件名 说明 回调参数
@click 点击图标时触发 {
  params:自定义参数
}

# 自定义图标（V1.5.0+）

注意

nvue 页面引入图标方式与 vue 不同，如需在 nvue 中使用，请仔细阅读文档处理。

以下所有说明都是基于 阿里图标库 (opens new window)进行扩展，其他图标库同理，明白原理即可方便扩展。

# vue页面自定义图标步骤说明

1、获取图标

访问 阿里图标库 (opens new window)，搜索选择需要的图标添加至购物车（然后添加至自己项目中）或者自行上传svg图标至项目中，下载获取字体文件。

FirstUI自定义图标

2、将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。

3、打开 iconfont.css ,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确：

@font-face {
	font-family: iconfont;
	src: url('/static/iconfont.ttf') format('truetype');
}

.fui-custom-icon {
	font-family: "iconfont" !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

4、上面css默认的 font-family 都为 iconfont，可自行更换，确保你使用的字体名字（font-family）足够特殊。

5、在 vue 页面引入使用自定义图标。

在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面

/*App.vue*/
<style>
@import "./static/iconfont.css";
</style>
1
2
3
4

6、使用 custom-prefix 和 name 属性自定义图标，取值对标css文件。

<fui-icon custom-prefix="fui-custom-icon" name="icon-fabulous"></fui-icon>
1

# nvue页面自定义图标步骤说明

1、获取图标

获取图标方式同上。

2、在使用页面引入字体文件，注意确保路径正确

// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import fuiicons from '@/static/iconfont.ttf'
domModule.addRule('fontFace', {
	'fontFamily': 'fuiicons',
	'src': "url('" + fuiicons + "')"
});
// #endif
1
2
3
4
5
6
7
8

3、注意：addRule 方法里的 fontFamily 可以随意取。这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。请自行修改字体文件属性名称，从 阿里图标库 下载的默认值为 iconfont 。

4、在项目根目录的 App.vue 中，写入以下css，注意：font-family 与 addRule 方法中（字体的真正名字）一致。

/*App.vue*/
<style>
/* #ifdef APP-NVUE */
.fui-custom-icon {
 	font-family: "fuiicons" !important;
 	font-size: 16px;
 	font-style: normal;
 	-webkit-font-smoothing: antialiased;
 }
/* #endif */
</style>
1
2
3
4
5
6
7
8
9
10
11

5、新建字体js文件，如：fui-custom-icon.js，写入相关字体图标，对标css文件（注意 css 中 \e704 在 js 中需写成 \ue704）。然后在页面引入js文件。

//fui-custom-icon.js 内容
export default {
	"icon-fabulous": "\ue704",
	"icon-collection": "\ue705",
	"icon-comment": "\ue706",
	"icon-forward": "\ue707"
}

//在使用页面引入js文件，注意：确保路径正确
import customicons from '@/static/fui-custom-icon.js';
1
2
3
4
5
6
7
8
9
10

6、使用 custom-prefix 和 name 属性自定义图标。

<fui-icon customPrefix="fui-custom-icon" :name="customicons['icon-fabulous']"></fui-icon>
1

特别说明

nvue端使用自定义字体图标比较繁琐，如果不考虑 FirstUI 字体图标组件后续更新或者接受自行维护，可将第2、4、5 步骤写入组件内部，注意区分开自定义字体图标与FirstUI字体图标，避免冲突。还需要做如下简单调整：

1、组件中 nvue下 text 插值调整，原先 {{ customPrefix?name:icons[name] }}，调整为 {{ customPrefix?customicons[name]:icons[name] }} 。

2、页面使用组件时，name 传值调整，原先 :name="customicons['icon-fabulous']" 调整为 name="icon-fabulous"。
1
2
3

示例预览

# 示例代码地址

FirstUIIcon 图标

# 资源下载

VIP用户可下载图标的设计文件和svg文件 。

开通会员 (opens new window)

Last Updated: 1/10/2024, 6:25:05 PM

← Button 按钮 →