vue 2.x项目中引用 svg图标

1.安装svg插件npm install svg-sprite-loader -D

2.修改 webpack.base.conf.js 

      {
       test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

此处添加一个匹配‘.svg’文件的规则，并且移除原来的规则

3.在src目录下创建icons文件夹，并在icons文件夹下面创建index.js，用来导出svg文件，并在同层级创建svg文件夹，用来存储项目中可能用到的.svg文件

结构目录如图：

index.js中写:

const req = require.context('./svg', false, /\.svg$/)
req.keys().map(req)

4.编写自己的svg组件

<template>
  <svg :class="`svg-icon${className?' '+className:''}`" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>
<style scoped>
  .svg-icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    fill: red;
    overflow: hidden;
  }
</style>

5.在main.js中全局注册字体图标文体，当然也可以在单独组件中独自引用

import './icons'
import svgIcon from '@/components/svg'// svg组件
Vue.component('svgIcon', svgIcon)

6.现在就可以在项目中直接使用svg图标了

<svgIcon icon-class='fork' />

<svgIcon icon-class='wechat' :className="'classname'"/>