图标集合介绍

基于 Iconify 的高性能图标库，支持 100+ 图标集，按需加载，零运行时开销。

特性

• 🚀 高性能 - 使用 unplugin-icons 实现编译时按需加载
• 📦 体积小 - Tree-shaking 极致化，只有用到的图标才会被打包
• 🎨 100+ 图标集 - 整合 Iconify 生态，20 万+ 图标
• 🔧 完全兼容 - 保持与现有 YhIcon 组件 API 兼容
• 🌳 SSR 支持 - 支持服务端渲染

基础用法

使用 icon 属性指定图标，格式为 前缀:图标名。

基础用法

不同尺寸

使用 size 属性设置图标尺寸，支持数字和字符串。

不同尺寸

自定义颜色

使用 color 属性设置图标颜色。

自定义颜色

旋转动画

使用 spin 属性让图标旋转，常用于加载状态。

旋转动画

旋转角度

使用 rotate 属性设置图标的静态旋转角度。

旋转角度

为什么选择 Iconify？

传统方式的问题

方式	缺点
字体图标 (Icon Font)	需要额外请求字体文件，SSR 不友好，颜色难控制
SVG 文件	每个图标都是独立文件，管理困难
组件库自带图标	图标数量有限，扩展困难

Iconify 优势

• 按需加载：只打包使用的图标，体积最小化
• 统一 API：不同图标集使用相同接口
• 海量图标：20 万+ 图标可选
• Tree-shaking：自动移除未使用的图标

使用方式

安装

npm install @yh-ui/icons

Vue 中使用

<script setup lang="ts">
import { Icon } from '@yh-ui/icons'
</script>

<template>
  <Icon icon="mdi:home" />
  <Icon icon="ep:search" />
  <Icon icon="mdi:loading" spin />
</template>

图标集推荐

常用的图标集前缀：

前缀	图标集	图标数量
mdi	Material Design Icons	6000+
ep	Element Plus	200+
lucide	Lucide	1500+
tabler	Tabler Icons	3000+
ri	Remix Icon	2000+
bi	Bootstrap Icons	1500+
fxemoji	Firefox Emoji	1000+

更多图标集请访问 Iconify 图标库。