本文介绍了在Vue项目中如何利用svg-sprite-loader加载和使用本地SVG图标。首先，通过安装svg-sprite-loader并在vue.config.js中配置loader来处理SVG文件。接着，创建一个方法引用所有SVG文件并调用该方法完成加载。然后，定义一个SVG组件，通过props传递SVG名称进行渲染。最后，展示如何在组件中使用带有local-前缀的SVG图标，并在浏览器中查看渲染效果。
然后定义了一个svg组件（这个在后面的实现中细讲）。最后就是在vite中加载这些svg文件，在Icon中使用svg时，会指向这些文件。
svg图标实现
我没有使用上面的方式加载svg，原因是：我使用的是webpack，在编译时无法识别fs这种服务端读取文件的模块，所以就用使用webpack的svg-sprite-loader来加载svg。
1. svg-sprite-loader
先安装svg-sprite-loader
npm i svg-sprite-loader -D
在vue.config.js中添加loader配置，以前webpack配置都写在webpack.config.js中，后来改了。
这里的include中指定svg的目录，test是目标svg的正则表达式，symbolId是加载的svg图标的新命名，在原本svg的name之前，加了一个 local-
最低0.47元/天 解锁文章
扫一扫
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
