在现代前端开发中，图标库是必不可少的基础设施。然而，在 Vue 3 和 UniApp 的跨端开发场景下，我们常常面临各种痛点：
- 😭 兼容性噩梦：Web 端好好的 SVG，到了小程序里就显示不出来。
- 📦 体积臃肿：引入一个图标库，打包体积瞬间激增几兆。
- 😫 开发体验差：没有类型提示，组件名靠猜，属性全靠试。
- 🎨 样式难调：想改个颜色、大小，还要写一堆 CSS 覆盖。
如果你也遇到过这些问题，那么 VU-Icons 正是你一直在寻找的解决方案。
🌟 VU-Icons 是什么？
VU-Icons 是一个专为 Vue 3 和 UniApp 打造的高质量 SVG 图标组件库。它不仅轻量、灵活，更完美解决了跨端兼容性问题，让你的开发效率倍增。
🌐 官网体验 ：https://vuicons.qiboz.top/
📦 Gitee ：https://gitee.com/zhangqibo920/uv-icons
📦 GitHub ：https://github.com/zhangqibo920/uv-icons
🔥 核心优势：为什么选择 VU-Icons？
1. 双端统一，无缝兼容
VU-Icons 的最大杀手锏是同时支持 Vue 3 和 UniApp。
- Vue 3：原生 SVG 渲染，性能极致。
- UniApp ：针对非 H5 平台（如微信小程序、App）进行了特殊优化，使用
rich-text方案完美渲染 SVG，彻底告别"图标消失术"。
2. 真正的按需引入 (Tree Shaking)
担心引入图标库导致包体积变大？VU-Icons 完美支持 Tree Shaking 。
无论库里有多少个图标，只要你只用了一个 <VuHome />，打包时就只会包含这一个图标的代码。你的应用体积，由你掌控。
3. 极致的开发体验 (TypeScript)
作为一个现代组件库，TypeScript 支持是标配。
VU-Icons 内置了完整的 .d.ts 类型声明。在 VS Code 中，你能获得完美的组件名自动补全和属性提示，写代码就像在填空一样丝滑。
4. 高度可定制
告别繁琐的 CSS 覆盖，VU-Icons 提供了直观的 Props：
size：支持数字（如24）和字符串（如'2rem'），响应式布局更轻松。color：支持 hex、rgb、颜色名，甚至默认继承父级currentColor。spin：想要一个 Loading 效果？加上spin属性，任何图标都能变成旋转的加载动画！
快速上手
第一步：安装
bash
npm install vu-icons
# 或者
yarn add vu-icons第二步：使用（Vue 3 项目）
vue
<script setup lang="ts">
// 直接按需引入，无需额外配置
import { VuHome, VuSearch, VuSettings } from 'vu-icons'
</script>
<template>
<!-- 基础用法 -->
<VuHome />
<!-- 自定义颜色和尺寸 -->
<VuSearch color="#1890ff" :size="32" />
<!-- 一键开启旋转动画 -->
<VuSettings spin color="#52c41a" />
</template>第三步：使用（UniApp 项目）
vue
<script setup lang="ts">
// 注意：UniApp 请从专用路径引入以确保兼容性
import { VuHome, VuUser } from 'vu-icons/uniapp'
</script>
<template>
<view>
<VuHome :size="40" color="#333" />
<VuUser />
</view>
</template>进阶玩法
动态图标状态
结合 Vue 的响应式特性，你可以轻松制作交互效果：
vue
<script setup>
import { ref } from 'vue'
import { VuRefresh } from 'vu-icons'
const loading = ref(false)
const refresh = () => {
loading.value = true
setTimeout(() => loading.value = false, 2000)
}
</script>
<template>
<button @click="refresh">
<!-- 点击时自动旋转 -->
<VuRefresh :spin="loading" />
刷新列表
</button>
</template>结语
VU-Icons 致力于成为 Vue 3 生态中最简单、最纯粹的图标解决方案。如果你厌倦了配置繁琐的 Font Icon，或者受够了跨端开发的兼容性坑，不妨试试 VU-Icons。
如果你觉得不错，欢迎在 Gitee 上点个 Star 支持一下！
👉 立即访问官网 ：https://vuicons.qiboz.top/