大数据毕业设计之前端05：Vue中如何加载本地svg图标_前端优化svg加载(1)

BuildAdmin在src/assets/icons下存放了很多svg图片，我们要将这些svg封装到中。在BuildAdmin中，使用的是node的fs模块来读取这些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中，后来改了。

这里的