SVG图标在vue中的使用方式之一

使用步骤

一，安装依赖包

npm i -D vue-svg-loader vue-template-compiler

二、vue-config中做如下配置

chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
    /**
     * 增加svg引用
     * 使用方法：https://github.com/visualfanatic/vue-svg-loader#user-content-example-usage
     */
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

三，使用

<span class="xx"><LiveNum/>xxx</span>

import LiveNum from '@/assets/images/icon-svg/liveNum.svg'

components: {
    LiveNum
}

参考

• github.com/visualfanat…
• vue-svg-loader.js.org/#example