# Icon 图标

概述

Icon 图标，First UI字体图标库。

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiIcon from "@/components/firstui/fui-icon/fui-icon.uvue"
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

修改大小

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

<fui-icon name="addfriends" :size="60"></fui-icon>
<fui-icon name="addfriends-fill" :size="60"></fui-icon>

1
2

修改颜色

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

<fui-icon name="addfriends" color="#465CFF"></fui-icon>
<fui-icon name="addfriends-fill" color="#465CFF"></fui-icon>

1
2

插槽名称	说明
-	-

属性名	类型	说明	默认值	平台差异说明
name	String	图标名称	-	-
size	Number	图标大小	64	-
unit	String	图标大小单位	rpx	-
color	String	图标颜色	#333333	-
fontWeight	String	图标字重，仅支持normal、bold、‘400‘，’700‘	normal	-
disabled	Boolean	是否禁用点击	false	-
param	String	自定义参数	0	-

事件名	类型	说明	回调参数
@onclick	(event: string) => void	点击图标时触发	param:自定义参数

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