脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → unplugin-svg-component图标

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图标的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解Vue调用手机相机和相册以及上传

    详解Vue调用手机相机和相册以及上传

    这篇文章主要介绍了Vue调用手机相机及上传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 前端vue项目如何使用Decimal.js做加减乘除求余运算

    前端vue项目如何使用Decimal.js做加减乘除求余运算

    decimal.js是使用的二进制来计算的,可以更好地实现格化式数学运算,对数字进行高精度处理,使用decimal类型处理数据可以保证数据计算更为精确,这篇文章主要给大家介绍了关于前端vue项目如何使用Decimal.js做加减乘除求余运算的相关资料,需要的朋友可以参考下
    2024-05-05
  • 利用vue对比两组数据差异的可视化组件详解

    利用vue对比两组数据差异的可视化组件详解

    这篇文章主要给大家介绍了关于利用vue对比两组数据差异的可视化组件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!)

    electron-vue中报错Cannot use import statement outside a m

    Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架,下面这篇文章主要给大家介绍了关于electron-vue中报错Cannot use import statement outside a module的解决方案,需要的朋友可以参考下
    2023-02-02
  • Vue.js点击切换按钮改变内容的实例讲解

    Vue.js点击切换按钮改变内容的实例讲解

    今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 解决Vue项目中Emitted value instead of an instance of Error问题

    解决Vue项目中Emitted value instead of an 

    这篇文章主要介绍了解决Vue项目中Emitted value instead of an instance of Error问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 解决vue安装less报错Failed to compile with 1 errors的问题

    解决vue安装less报错Failed to compile with 1 errors的问题

    这篇文章主要介绍了解决vue安装less报错Failed to compile with 1 errors的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    这篇文章主要介绍了如何处理vue router 路由传参刷新页面参数丢失，对vue感兴趣的同学，可以参考下
    2021-05-05
  • vue实现element表格里表头信息提示功能(推荐)

    vue实现element表格里表头信息提示功能(推荐)

    小编最近接了这样一个需求，需要在element表格操作一栏添加提示功能，下面小编给大家带来了基于vue实现element表格里表头信息提示功能，需要的朋友参考下吧
    2019-11-11
  • vue.js的提示组件

    vue.js的提示组件

    这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论