VU-Icons
项目概述
一套高质量的SVG图标组件库,旨在为开发者提供丰富、一致的图标资源,适用于各种Web和移动应用开发。支持Vue3和UniApp双框架,采用CSS Mask + SVG方案,无需字体文件,支持Tree Shaking按需引入。
技术栈
| 技术 | 用途 |
|---|---|
| Vue 3 | 前端框架 |
| TypeScript | 类型系统 |
| UniApp | 跨平台支持 |
| SVG | 图标格式 |
核心特性
- 双框架支持: 同时支持Vue3和UniApp,一套代码多端运行
- 按需引入: 支持Tree Shaking优化,只打包使用的图标
- CSS Mask + SVG: 使用CSS Mask + URL编码SVG方案,无需字体文件
- 高度可定制: 支持自定义尺寸和颜色
- TypeScript: 完整的类型声明,开发体验优秀
- 自动化构建: 一键生成组件,快速添加新图标
- 小程序兼容: 完美支持微信小程序等非H5环境
主要工作
- 设计组件API架构,实现Vue3和UniApp的统一组件接口
- 实现CSS Mask + SVG渲染方案,解决小程序兼容性问题
- 开发自动化构建脚本,支持从SVG文件自动生成Vue组件
- 实现Tree Shaking支持,优化包体积
- 编写完整的TypeScript类型定义,提升开发体验
- 实现响应式尺寸支持,兼容数字和字符串格式
项目成果
- 提供高质量SVG图标组件,支持Vue3和UniApp双框架
- 组件体积小,支持Tree Shaking按需引入,优化打包体积
- 完美兼容微信小程序等非H5环境,无需条件编译
- 自动化构建流程,支持快速添加新图标
- 完整的TypeScript类型支持,提升开发体验
- 开源发布到npm,获得积极反馈