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图标的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了el-tree懒加载的实现以及局部刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了mpvue实现左侧导航与右侧内容的联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
今天小编就为大家分享一篇element-ui 设置菜单栏展开的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
这篇文章主要介绍了Vue实现 点击显示 再点击隐藏 点击页面空白区域也隐藏效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要给大家介绍了关于vue滚动条滚动到顶部或者底部的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
Effect几乎是Vue3.0中最重要的一个功能了,计算属性监听函数都是基于effect实现的,下面这篇文章主要给大家介绍了关于vue3中effect函数到底是什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue多次打包后出现浏览器缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在使用el-table的时候经常会涉及到表格的列合并，包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了解决vue create 创建项目只有两个文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了一个手写的vue放大镜，组件使用less，文中给出了示例代码,需要的朋友可以参考下2019-08-08
最新评论