unplugin-svg-component优雅使用svg图标指南
更新时间：2023年03月13日 08:48:10 作者：Jevon617
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
现如今, 项目中的小图标往往会使用 svg 的方式来做, 许多 svg 插件供我们选择, 比如说 vite-plugin-svg-icons, 这个插件的使用的范围是比较广的, 但是就我使用下来而言, 发现几个痛点:
- 使用该插件之后必须要自己在新建一个 svg 的( vue/react )组件, 这有些繁琐了;
- ts 支持有限, 我期望的是在使用组件的时候能够智能提示所有的icon图标的名字;
- 不支持 tree-shaking , 未使用的图标依然会打包到最终的产物中;
- 不支持svg图标的hmr, 每次新增/删除图标都需要重启服务;
- 有色 图标的使用问题。
而且, 似乎这个仓库已经不再维护了。
unplugin-svg-component
因此, 基于以上几个痛点, 我便鼓捣出unplugin-svg-component, 项目使用Anthony Fu大佬的unplugin项目模板, 因此支持 vite, webpack, rollup, esbuild 等多个打包工具, 目前插件主要针对几个痛点做了以下功能:
- 根据项目类型 vue/react, 自动生成对应的组件(这里的原理是检测项目中的dependencies是否包含 vue/react, 这可能不准确, 所以也支持手动配置);
- 会生成 svg-component.d.ts 文件, 用于组件使用过程中提示svg的名称, 你只需要把 svg-component.d.ts引入到你的tsconfig.json当中;
- 在生产环境下, 会扫描你使用过的 svg 图标, 把未使用到的图标从你的最终产物中剔除;
- 目前支持在 Vite 的开发环境的 HMR, 其它工具会后续支持;
- 有色 的图标可以通过配置
preserveColor来决定哪些svg图标需要保留其颜色。
效果图
Vue
React
结语
这个项目是我开源的第一个作品, 没有宣传, 也陆陆续续有人star, 这让我有了坚持下去的动力, 如果有同学有 svg 图标使用这方面的需求, 不妨试试这个插件, 希望能帮助到你，更多关于unplugin-svg-component图标的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Vue3导航栏组件封装的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue多条件筛选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下2021-06-06
Vue使用babel-polyfill兼容IE解决白屏及语法报错问题
这篇文章主要介绍了Vue使用babel-polyfill兼容IE解决白屏及语法报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue数据驱动模拟实现的相关资料，实现Observer构造函数，监听已有数据data中的所有属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了vue歌曲进度条demo，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue两次赋值页面获取不到的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
学习vue有一段时间了，最近使用vue做了一套后台管理系统，其中使用最多就是递归组件，下面这篇文章主要给大家介绍了关于Vue利用递归实现树形菜单的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-11-11
详解如何在Vue3+TS的项目中使用NProgress进度条
本文主要介绍了详解如何在Vue3+TS的项目中使用NProgress进度条，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家详细介绍了Vue实现炫酷的代码瀑布流背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论