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

我的个人网站 www.ryzeyang.top

内容概览
svg-sprite-loader的使用

由于项目需要，要在项目中使用设计师给的 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