Icon 图标

该组件基于字体的图标集，包含了大多数常见场景的图标。

平台差异说明

APP	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

<fu-icon name="right"></fu-icon>

修改图标的样式

• 通过 color 属性设置图标颜色。
• 通过 size 属性设置图标大小。

<fu-icon name="right" size="30" color="#999999"></fu-icon>

API

Icons Props

属性名	说明	类型	默认值	可选值
index	用于区分多个组件的标识符, 点击组件时通过click事件传递的标识符	String｜Number	-	-
name	图标名称, 只要带有"/"均认为是图片形式	String	-	-
size	图标大小	Number	16	-
color	图标颜色	String	#333333	-
fontFamily	自定义图标	String	-	-
imgMode	图片模式，当name为图片地址时生效	String	aspectFill	-
width	显示图片小图标时，图片的宽度	String｜Number	-
height	显示图片小图标时，图片的高度	String｜Number	-
stop	是否阻止事件传播	Boolean	false	true

Icons Events

事件名	说明	回调参数
click	点击图标时触发	-

通过 fontFamily 自定义图标

1. 引入字体图标。
2. 页面 style 中定义 font-family 属性，并正确引入字体。
3. fu-icon 已经收录了日常开发中常用的图标，但是因为体积问题，不可能一直无限添加新图标，所以 fu-icon 也同时提供了扩展的方法。

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

4. 组件声明 fontFamily 属性，值为 步骤2 的 font-family，此组件的 name 属性将不生效。
5. 组件内需要使用字体的 unicode 码作为图标显示内容。

<fu-icon fontFamily="CustomFont" size="25">{{ '\ue64f' }}</fu-icon>

图标集

请参考Iconfont官网