Vue | 使用 SVG sprite loader 来引入 svg

这个库给的示例代码是 webpack.config.js 但是我们现在在用的是 Vue

官方的代码是这样的

翻译成 Vue.config.js，用到的 chainWebpack

其他备注

这一步是为了解决 ts 报错

这一步的作用就是在 html 的 head 部分嵌入一个 symbol ，接着我们在 template 里面用 <use /> 标签就可以使用啦

想必看出来了，这样引入真的 很麻烦，如果我们有几十个 svg ，难道要一个一个的引入？？

而且每次都要写 <svg><use /></svg> 好麻烦，我们可不可以把它封装成一个组件呢？

@/components/Icon.vue

@/main.ts 全局注册

然后直接在 view 里面使用 <Icon />即可

尝试实现切换标签页的时候自动更改填充颜色来达到突出显示的效果

但是并不是所有的 svg 都会自动变色, 只有一些标签会起作用… 于是我直接干脆调成了这样

和这样

笑死我了，直接逃避这个问题

经过排查发现是 svg 代码里面的 fill 属性来控制了颜色，从而 css 不能从外部更改颜色

如图：

手动删掉此属性即可正常用css指定颜色，但是如果有很多svg.这样的话未必太过麻烦

我们可以使用一个叫做 svgo-loader 的插件来解决此问题

不知道是什么原因，高版本的这个插件会导致加载不出 svg 的 bug，我使用的是以下版本，是正常使用的

我的完整的版本号（可以正常使用的）

安装完之后，我们需要配置 vue.config.js 文件

完整的 vue.config.js

收工，效果如下

PS: vue.config.js 报 eslint 错误怎么办？

把这句话添加到 vue.config.js 的第一行即可