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
    SvgIcon组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
        <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 , 注册组件，全局使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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 ，需要手动排除

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
      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的颜色

参考链接

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