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

前言

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

项目需求

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

第一次开发

解决思路

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

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

//...

 

问题

由于激活和未激活状态下，使用的并不是同一个 icon，在网速有点慢的情况下，就会出现，鼠标悬浮上去，icon 消失的情况。这是因为 active 的 icon 还没加载出来。那这样的体验无疑是很差的。

第二次开发

解决思路

不能用两个 icon 互相替换这样的形式。应该使用同一个 icon，并且在激活状态下更改它的颜色。那么通过 img 标签引入 svg 这样的形式肯定是不行的了。

然后找到了解决方案：svg-sprite-loader

第二次开发

1.安装依赖

yarn add --dev svg-sprite-loader 

2.创建 SvgIcon 组件

在 components 目录下创建 SvgIcon.vue 文件

3.一次性引入全部 icon

在 plugins 目录下，创建文件 svg-icon.js

import Vue from 'vue'
import SvgIcon from '~/components/SvgIcon'

// 注册组件
Vue.component('SvgIcon', SvgIcon)
const req = require.context('~/assets/svg', true, /.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
requireAll(req) 

4.修改 build 配置 修改 nuxt.config.js 文件

const { resolve } = require('path')
const nuxtConfig = {//...plugins: [//...,'~/plugins/svg-icon',],build: {//...extend(config, ctx) {const svgRule = config.module.rules.find((rule) =>rule.test.test('.svg'))svgRule.exclude = [resolve(__dirname, 'assets/svg')]config.module.rules.push({test: /.svg$/,include: [resolve(__dirname, 'assets/svg')], use: [{loader: 'svg-sprite-loader',options: { symbolId: 'icon-[name]' },},],})},}
} 

5.使用

这时，我们可以在代码里使用 svg-icon 组件，但是还有一个要注意的问题：在 svg 文件中，要将其颜色的 fill 属性的值修改为 currentColor

然后，在我们的代码里使用 svg-icon 组件啦！

此时，svg 修改颜色就完成了

总结

使用 svg-sprite-loader 会让你的 svg 引入写起来非常的舒服，可以随意修改其颜色，就是配置起来稍稍麻烦一点。但对比开发体验来说，这点时间花费，是完全值得的！

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享