在Vue组件中，使用svg

1. 安装加载器

在当前项目下，安装加载器。
npm install svg-sprite-loader --save-dev

2. 配置文件

修改配置文件中的相关信息。

//  svg加载器，用以加载svg。
  {
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: [resolve('src/assets/svg')],
      options: {
        symbolId: 'icon-[name]'
      }
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      // 在url的加载器中，移除svg部分
      exclude: [resolve('src/assets/svg')],
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },

3.添加文件信息

4. 编写组件

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon-svg',
    props: {
      iconClass: {
        type: String,
        required: true
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

<style>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

5 测试组件

<template>
  <icon-svg icon-class="progressFailBig" />
</template>

<script>
  import IconSvg from "./IconSvg";
  // 没有全局化，需要自己导入
  import './assets/svg/progressFailBig.svg'
  export default {
    components: {IconSvg}
  }
</script>

6.加载所有的svg文件

在上一节中，我们使用import导入要使用的svg文件，但当项目中svg文件过多时，一个个导入会非常得麻烦。在这里我们使用require.context全局导入所有的svg文件。
首先创建文件svgConfig.js导入所有的svg文件，这里需要注意路径的问题。

import Vue from 'vue'
import SvgIcon from "../components/util/SvgIcon"; // svg组件
// 注册全局组件，不添加则需要手动导入组件
Vue.component('svg-icon', SvgIcon)
const requireAll = reqireContext => reqireContext.keys().map(reqireContext)
// 需要保证路径的正确性，这里指向svg文件夹
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

然后在main.js里面全局引用本文件。

import '@/utils/svgConfig'

最后，调用该组件进行演示。

<template>
  <svg-icon icon-class="progressFailBig"> </svg-icon>
</template>
<script>
  export default {
  }
</script>
<style scoped>
</style>

与上文对比，这里不在需要手动地导入progessFailBig.svg文件，结果显示正常。