Iconfont 图片集合

此npm默认对外暴露 iconfont.js,其目的为使用UI设计规范通用的图标。

作者

• 公共研发组前端 周晓鹏

版本

• v0.2.1
  • 增加鼠标悬浮变色 :::

用法

基本用法

把ff-iconfont包内的组件Icon复制到项目的components文件夹中,然后需要引入 npm i @purge-icons/generated 或者 pnpm i @purge-icons/generated

如果以svg-icon: 开头，则会在本地中找到该 svg 图标，否则，会加载 Iconify 图标。

<template>
  <!-- 加载四信通用iconfont.js的icon-->
  <Icon icon="font-icon:cheliang1" color='#fff' size='20' hoverColor='#000'/>

  <!-- 加载本地 svg图片 -->
  <Icon icon="svg-icon:peoples" />

  <!-- 加载 Iconify库的icon -->
  <Icon icon="ep:aim" />
</template>

useIcon

如果需要在其他组件中如 ElButton 传入 icon 属性，可以使用 useIcon 这个代码 代码文件在hooks文件夹里

<script setup>
import { useIcon } from '@/hooks/useIcon'
import { ElButton } from 'element-plus'

const icon = useIcon({ icon: 'svg-icon:save' })
</script>

<template>
  <ElButton :icon="icon"> button </ElButton>
</template>

参数介绍

const icon = useIcon(props)

props

详见

Icon 属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | icon | 图标名 | string | - | - | | color | 图标颜色 | string | - | - | | size | 图标大小 | number | - | 16 | | hoverColor | hover颜色 | string | - | - |