图标系统使用说明（工作区内部）

重要提示

💡 工作区内部开发统一使用 Vue 组件图标方式，直接从 @qxs-bns/icons 导入图标组件，确保代码一致性和可维护性！

在当前 QXS-BNS 工作区中使用图标系统。统一使用 Vue 组件图标方式，直接引入图标组件，确保代码简洁和性能最佳。

Vue 组件图标使用

直接从 @qxs-bns/icons 包中导入图标组件，这是工作区内部的标准使用方式：

<script setup lang="ts">
import { Home, ZoomIn, Financial, Delete, Visit } from '@qxs-bns/icons'
</script>

<template>
  <!-- 基础使用 -->
  <Home />
  <ZoomIn />
  <Financial />

  <!-- 属性控制 -->
  <Home :size="24" color="#409EFF" />
  <ZoomIn size="2em" color="#67C23A" />
  <Financial :size="32" color="#F56C6C" />

  <!-- 更多图标 -->
  <Delete :size="20" />
  <Visit color="#E6A23C" />
</template>

QxsIcon 通用图标组件

除了直接使用 Vue 组件图标外，QxsIcon 组件提供了统一的图标使用接口，支持多种图标类型：

<script setup lang="ts">
import { QxsIcon } from '@qxs-bns/components'
import { Home } from '@qxs-bns/icons'
</script>

<template>
  <!-- Vue 组件图标 -->
  <QxsIcon :icon="Home" :size="24" color="#409EFF" />

  <!-- Iconify 图标 -->
  <QxsIcon icon="ep:home" :size="24" />

  <!-- UnoCSS 图标 -->
  <QxsIcon icon="i-ep:home-filled" :size="24" />

  <!-- CSS 类图标 -->
  <QxsIcon icon="fas fa-home" :size="24" />
  <QxsIcon icon="i-custom-home" :size="24" />
</template>

支持的图标类型

类型	格式示例	说明
Vue 组件	:icon="HomeComponent"	工作区内部推荐方式
Iconify	icon="ep:home"	海量在线图标库
UnoCSS	icon="i-ep:home-filled"	编译时生成，零运行时
CSS 类	icon="fas fa-home"	兼容现有图标字体
图片 URL	icon="https://..."	支持自定义图片
SVG Sprite	icon="home"	本地 SVG 雪碧图

👉 交互式配置 - 在线体验不同图标类型

可用图标列表

查看所有可用的图标：

👉 图标展示

最佳实践

内部开发规范

1. 统一使用 Vue 组件图标：

   <script setup>
   import { Home, User, Setting } from '@qxs-bns/icons'
   </script>
   
   <template>
     <!-- ✅ 推荐：直接使用图标组件 -->
     <Home :size="24" color="#409EFF" />
     <User :size="20" color="#67C23A" />
     <Setting :size="16" color="#F56C6C" />
   </template>

2. 按需导入：只导入需要的图标组件

   <script setup lang="ts">
   // ✅ 推荐：按需导入
   import { Home, ZoomIn } from '@qxs-bns/icons'
   
   // ❌ 避免导入整个包
   import * as Icons from '@qxs-bns/icons'
   </script>

性能优化

• 按需导入：只导入需要的图标组件，支持 Tree-shaking
• 缓存友好：图标组件会被 Vue 自动缓存，无需担心重复渲染

更多资源

图标类型文档

• 🧩 Vue 组件图标 - 工作区内部推荐方式
• 🌐 Iconify 图标 - 海量在线图标库
• ⚡ UnoCSS 图标 - 编译时优化图标
• 🎨 CSS 类图标 - 兼容现有图标字体
• 🖼️ 图片 URL 图标 - 自定义图片图标
• 📦 SVG Sprite 图标 - 本地 SVG 雪碧图

其他资源

• 📖 图标展示 - 查看所有可用图标和交互式配置
• 🔧 开发说明 - 了解开发和构建流程