UseIconfont - Iconfont图标

组件介绍

UseIconfont 是基于 Vue3 + TypeScript 封装的 iconfont 图标组件，专注于为项目提供标准化、开箱即用的字体图标渲染能力，统一项目内字体图标的使用规范，完整支持自定义大小、颜色、可点击状态等常用配置，无额外DOM嵌套与第三方依赖，可直接替换项目内原生i标签使用，大幅降低字体图标场景的重复代码量。

核心能力

开箱即用的图标渲染能力

内置标准化图标渲染逻辑，仅需传入必传项name（图标类名）即可快速渲染对应iconfont图标，默认类名前缀为iconfont，符合国内主流iconfont使用规范，无需手动拼接类名、编写i标签，降低图标使用成本。

灵活的样式自定义能力

内置fontSize（图标大小）、color（图标颜色）配置项，默认图标大小为18px，支持传入任意合法CSS尺寸值与颜色值，无需额外编写内联样式或自定义类名即可快速调整图标外观，适配不同UI场景的样式需求。

标准化的交互状态支持

内置clickable可点击状态配置项，开启后自动为图标添加pointer鼠标手型样式，无需额外编写cursor样式，快速适配编辑、删除、查看等操作类图标的交互场景，统一项目内可点击图标的交互表现。

可配置的类名前缀适配

支持自定义prefix（图标类名前缀），默认值为iconfont，可灵活适配不同项目的iconfont命名规范（如自定义前缀为icon、wyf-icon等），无需修改组件源码即可兼容不同项目的字体图标配置，适配性强。

极致轻量的渲染性能

基于原生i标签实现，无额外DOM嵌套，无任何第三方依赖，组件打包体积几乎可忽略，渲染性能与原生标签完全一致，同时保持API极简设计，学习成本极低，可无缝替换项目内原生字体图标写法。

完整的TypeScript类型支持

所有Props均有明确的TypeScript类型定义与默认值，在TS项目中可获得完整的类型提示与参数校验，避免传参类型错误、漏传必传项等问题，提升开发体验与代码健壮性。

符合项目规范的默认配置

所有配置项均提供符合中后台项目通用规范的默认值：默认图标大小18px、默认前缀iconfont、默认不可点击，业务使用时仅需传入图标名称即可满足绝大多数场景需求，无需重复配置通用属性。

原生事件完全透传

基于原生i标签封装，所有原生DOM事件（如click、mouseenter、mouseleave等）均可直接绑定使用，无需额外事件转发逻辑，与原生标签使用体验完全一致，适配各类复杂交互场景。

使用

UseIconfont

Props

/**
 * 组件props
 */
export default {
  /**
   * 图标名称 必传
   */
  name: {
    type: String,
    required: true
  },
  /**
   * 图标前缀
   */
  prefix: {
    type: String,
    default: 'iconfont'
  },
  /**
   * 图标大小
   */
  fontSize: {
    type: String,
    default: '18px'
  },
  /**
   * 图标颜色
   */
  color: {
    type: String,
    default: ''
  },
  /**
   * 是否可点击
   */
  clickable: {
    type: Boolean,
    default: false
  }
}

注意事项

1、使用该组件需在plugins/modules/WyfeXIVue.ts或main.ts中引入：

import { dynamicLoadFile } from '@wyfex/iutils'
import { getConfig } from '@/config'

// 引入iconfont font图标
dynamicLoadFile(getConfig('ICONFONT_URL.FONT'))
// 引入iconfont symbol图标
dynamicLoadFile(getConfig('ICONFONT_URL.SYMBOL'), 'js')

UseIconfont - Iconfont图标 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

注意事项 ​

UseIconfont - Iconfont图标

组件介绍

核心能力

使用

Props

注意事项