Iconify 图标

通过 QxsIcon 组件使用 Iconify 提供的海量在线图标库。

🌐 关于 Iconify

Iconify 是一个包含超过 200,000 个图标的开源图标库，支持 150+ 图标集合。

📖 官方文档：https://iconify.design/

🚀 基本使用

无需安装额外依赖，直接使用图标名称：

<script setup>
import { QxsIcon } from '@qxs-bns/components'
</script>

<template>
  <!-- Element Plus 图标 -->
  <QxsIcon icon="ep:home" :size="24" />
  <QxsIcon icon="ep:user" color="#409eff" />
  
  <!-- Material Design Icons -->
  <QxsIcon icon="mdi:home" :size="32" />
  <QxsIcon icon="mdi:account" color="#67c23a" />
  
  <!-- Lucide 图标 -->
  <QxsIcon icon="lucide:home" :rotate="45" />
  <QxsIcon icon="lucide:user" flip="horizontal" />
</template>

🔍 图标命名规则

Iconify 图标使用 集合名:图标名 的格式：

• ep:home - Element Plus 的 home 图标
• mdi:account - Material Design Icons 的 account 图标
• lucide:user - Lucide 的 user 图标

🌟 热门图标集合

集合名	描述	图标数量	官方链接
ep	Element Plus	300+	查看图标
mdi	Material Design Icons	7000+	查看图标
lucide	Lucide	1000+	查看图标
heroicons	Heroicons	300+	查看图标
tabler	Tabler Icons	4000+	查看图标

🎯 优势

• 海量图标：200,000+ 图标可选
• 无需安装：在线加载，无需本地安装
• 自动缓存：浏览器自动缓存，提升性能
• 持续更新：图标库持续更新维护

⚠️ 注意事项

• 网络依赖：首次加载需要网络连接
• 加载延迟：可能存在轻微的加载延迟
• 字符串类型：图标名为字符串，无 TypeScript 类型提示

🔧 高级配置

关于 QxsIcon 组件的高级功能配置，请参考：

👉 QxsIcon 组件文档

🔍 图标搜索

在线搜索和预览 Iconify 图标：

👉 Iconify 图标搜索