在vuecli2项目中使用svg, 并且实现统一导入

安装loader

npm install svg-sprite-loader --save

配置loader

在根目录的build文件中，找到webpack.base.conf.js 文件

然后去新增loader配置：

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')], // 这里是你放svg的文件夹
    options: {
    symbolId: 'icon-[name]'// 一定要加，要不然svg会无效
    }
}

 其次找到原本的图片loader，将svg给排除掉：

创建 svg组件

可以在components中去创建一个svg的组件，组件内容：

<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: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

统一导入svg

在src目录下新增icons目录，需要准备一个存放scg的文件，以及一个js文件来实现统一导入

 index.js内容如下

import Vue from 'vue'
import Svg from '@/components/Svg'// svg组件

Vue.component('svgIcon', Svg)

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

const requireAll = requireFn => requireFn.keys().map(requireFn)
// 通过require.context收集，并且得到一个函数，调用keys方法拿到路径，再通过map去调用req这个函数，得到每个svg
requireAll(req)

最后在main.js中导入icons

import './icons'

使用

<svg-icon icon-class="tiktok"></svg-icon>   // iconClass参数就是你需要的svg的名称，例如tiktok.svg

注意点

        1. 要注意路径，根据自己的文件情况来填写

        2. 当我们修改了配置文件要记得重启项目，否则会报错