vue2.6中svg的使用，可改变icon颜色（svg-sprite-loader）

我的个人网站 www.ryzeyang.top.

由于项目需要，要在项目中使用设计师给的 icon 图标，可改变 icon 的颜色。

插件：svg-sprite-loader

版本：@vue/cli 4.3.1

使用：

1. npm install -D svg-sprite-loader

2. 在 src/components/ 下创建 SvgIcon 组件
   配置SvgIcon.vue
   

   <template>
   <svg :class="svgClass" aria-hidden="true">
   <use :xlink:href="iconName" />
   </svg>
   </template>
   <script>
   export default {
   name: 'SvgIcon',
   props: {
   iconClass: {
   type: String,
   required: true
   },
   className: {
   type: String,
   default: ''
   }
   },
   computed: {
   iconName () {
   return `#icon-${this.iconClass}`
   },
   svgClass () {
   if (this.className) {
   return 'svg-icon ' + this.className
   } else {
   return 'svg-icon'
   }
   }
   }
   }
   </script>
   
   <style scoped>
   .svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
   }
   </style>

3. 新建目录，将 svg 文件放到该目录下 src/icons/svg
   

4. 配置 index.js , 注册组件，全局使用

   import Vue from 'vue'
   import SvgIcon from '@/components/SvgIcon'// svg组件
   
   // register globally
   Vue.component('svg-icon', SvgIcon)
   
   const requireAll = requireContext => requireContext.keys().map(requireContext)
   /**
   * require.context(directory,useSubdirectories,regExp)
   * require.context():需要一次性的引入某个文件夹下的所有文件
   形参：
   directory：需要引入文件的目录
   useSubdirectories：是否查找该目录下的子级目录
   regExp：匹配引入文件的正则表达式
   */
   
   const req = require.context('./svg', false, /\.svg$/)
   requireAll(req)

5. 在 main.js 中引入

   import '@/icons'

6. 在和src同级的目录下创建vue.config.js并配置如下代码,
   vue-cli3 开始有默认的 svg和images 的loader ，需要手动排除

   const path = require('path')
   
   function resolve (dir) {
   return path.join(__dirname, './', dir)
   }
   
   module.exports = {
   chainWebpack: config => {
   const svgRule = config.module.rule('svg') // 找到svg-loader
   svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
   svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
   svgRule // 添加svg新的loader处理
   .test(/\.svg$/)
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
   symbolId: 'icon-[name]'
   })
   
   // 修改images loader 添加svg处理
   const imagesRule = config.module.rule('images')
   imagesRule.exclude.add(resolve('src/icons'))
   config.module
   .rule('images')
   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
   }
   }

7. 在组件中使用,stroke属性可以修改icon的颜色
   

   <svg-icon :icon-class=svg文件的名字如setting" :stroke="'#4bc8c8'"></svg-icon>

参考链接

https://www.cnblogs.com/cat-eol/p/11784125.html
https://www.jb51.net/article/149452.htm