Icon 图标

Icon 用字体图标展示常用操作和状态。以下图标来自当前项目的 components/fui-icon 目录，点击图标名称可以复制。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

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

图标列表

搜索图标名称

共 163 个图标，点击图标复制名称

基础用法

通过 name 指定图标名称；可使用 size、unit 和 color 调整图标外观。

<!-- 首页图标 -->
<fui-icon name="home"></fui-icon>

<!-- 自定义尺寸和颜色 -->
<fui-icon name="search" :size="48" unit="rpx" color="#465CFF"></fui-icon>

若项目未使用 easycom 自动注册，可以在页面中引入组件；路径以项目实际目录为准。

import FuiIcon from '@/components/fui-icon/fui-icon.vue';

export default {
  components: {
    // 图标组件
    FuiIcon
  }
};

属性

属性	类型	说明	官网默认值
name	String	图标名称	空字符串
size	Number、String	图标尺寸；未传入时读取全局配置，回退为 64	64
unit	String	尺寸单位；未传入时读取全局配置，回退为 rpx	rpx
color	String	图标颜色；未传入时使用全局配置或样式默认色	#333333
fontWeight	Number、String	字体粗细	normal
disabled	Boolean	是否禁用点击事件	false
params	Number、String	点击事件中返回的自定义值	0
customPrefix	String	自定义字体图标类名	空字符串
primary	Boolean	本地源码中的内部属性，控制主色显示；官网参数表未列出	false

事件

事件	说明	回调参数
click	点击图标时触发；disabled 为 true 时不触发	{ params }

<template>
  <!-- 携带自定义参数的图标 -->
  <fui-icon name="home" :params="1" @click="handleIconClick"></fui-icon>
</template>

<script>
export default {
  methods: {
    /** 处理图标点击 */
    handleIconClick({ params }) {
      uni.showToast({ title: `参数：${params}`, icon: 'none' });
    }
  }
};
</script>

平台说明

在字节跳动小程序中，组件源码提示需要在使用页面引入字体。nvue 的字体注册和自定义图标处理方式与普通 Vue 页面不同，使用时请结合 fui-icon.vue 的条件编译代码核对。

插槽

插槽	说明
—	官网未列出该组件的插槽