Nuxtjs 项目使用 svg-sprite-loader 更改 svg 的颜色

前言

由于一些原因，最新的公司项目要使用的技术切换到了 Nuxt.js，也就是 Vue 的 ssr 服务端渲染框架。

项目需求

在新项目的开发过程中，遇到了一个需求：有一栏带 icon 的 tab，要实现鼠标悬浮和 tab 在激活状态下，icon 和文字一起改变颜色。

第一次开发

解决思路

在之前使用 svg icon，都是直接把它放进 img 里来使用的，也就是这样：

<img src='assest/svg/icon_xxx.svg' /> 

这样的形式。这次开发我第一时间想到的还是这样的引入形式，然后在鼠标悬浮和激活时，把其替换成 active 状态的 icon，也就是这样：

<img v-if="active" src='assest/svg/icon_xxx_active.svg' />
<img class="icon-xxx" v-else src='assest/svg/icon_xxx.svg' />
//...

<style lang="scss" scoped> .icon-xxx {&:hover {content: url(assets/svg/icon_xxx_active.svg);}
} </style> 

问题

由于激活