Appearance
Icons 图标
@qxs-bns/icons 提供 QXS-BNS 的 Vue 图标组件。若你需要统一的 QxsIcon 入口，还可以搭配 @qxs-bns/components 一起使用。
安装
bash
pnpm add @qxs-bns/icons如果你还需要 QxsIcon 组件：
bash
pnpm add @qxs-bns/components基础引入
vue
<script setup lang="ts">
import { Home, User } from '@qxs-bns/icons'
</script>
<template>
<Home />
<User :size="20" color="#409EFF" />
</template>使用方式概览
| 方式 | 说明 | 入口文档 |
|---|---|---|
| Vue 组件图标 | 直接引入 SVG 组件，最轻量 | 推荐 |
| QxsIcon 统一入口 | 混合多种图标来源 | 需要 @qxs-bns/components |
| Iconify 图标 | 海量在线图标库 | 可扩展 |
| UnoCSS 图标 | 编译时图标能力 | 适合原子化样式 |
| 图片 URL 图标 | 自定义图片图标 | 兼容旧资源 |
| CSS 类图标 | 接入现有 iconfont 或类名体系 | 兼容旧项目 |
| SVG Sprite 图标 | 本地雪碧图方案 | 适合统一资产管理 |
适用场景
- 需要统一 SVG 图标资产的 Vue 3 项目。
- 需要按需引入图标组件、降低运行时体积的页面。
- 需要多种图标来源统一封装的业务系统。
使用建议
- 如果只是常规页面图标，优先直接从
@qxs-bns/icons导入组件。 - 如果业务里同时存在本地图标、Iconify、图片 URL 等多种来源，再使用
QxsIcon做统一封装。 - 图标选型前建议先看一次 图标展示，避免重复造轮子。