Vite Plugin 优化 svg，就这么简单搞定！

文章预览

前言 最近，在做项目优化的时候，突然发现有一个点可能我们平时都很少去注意- 我们如何维护和使用 svg 。当我们项目中 svg 资源过多时，无论是资源管理还是资源引入都是一个让人头疼的问题。 之前使用svg的方式 const  svgSrc  from   "@/assets/svg/xx.svg" ; const  SvgIcon =  ()  =>  {    return   < svg  { ...attribute }>              < use   xlinkHref = { `#${ svgSrc }`} />          svg > } 那如果项目中有如下代码，阁下该如何应对。 那我们就会重复如上的动作 从指定目录中引入文件资源( src ) 在指定的组件或者 svg元素 中接收 src 在合适的地方进行渲染处理。 之后使用svg的方式 不知道，大家之前用过Image Sprites [1] ，也就是我们常说的 「雪碧图」 。它能够把我们项目中用到的图片或者图标放置到一个图片中，然后依据图片位置来从中获取到我们像要展示的图 ………………………………