本文介绍了如何在Vue项目中使用Webpack处理SVG图标，包括使用svg-sprite-loader加载SVG文件，通过require.context动态引用，以及在Icon组件中处理local-前缀的本地SVG。还提供了从webpack配置到组件渲染的详细步骤。
Icon引用svg
在上一篇文章中，Icon只引用了两种图标，这里又加了一个svg的。
重点：svg前缀是 local- ，这里先记住。
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</
最低0.47元/天 解锁文章
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
