vue 加载svg文件

使用 svg-sprite-loader
yarn add svg-sprite-loader

vue.config.js文件中配置使用

 chainWebpack: (config) => {
    //添加loader 去指定目录加载图标，注意上下文
    config.module.rule("icon")
      .include.add(resolve("src/icon")).end() //重新获得上下文
      .test(/\.svg$/) //模式匹配
      .use("svg-sprite-loader") //设置loader
      .loader("svg-sprite-loader")
      .options({symbolId:'icon-[name]'}) //设置选项

    //把默认的加载svg loader去除 查看命令  vue inspect --rule svg
    config.module.rule("svg").exclude.add(resolve("src/icon"));
  },

view/components 创建组件

【SvgIcon.vue】
<template>
  <svg :class="svgClass" v-on="$listeners">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
import '@/icon/svg/dy.svg'

export default {
  name: 'svg-component',

  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>

在view文件夹下创建 icon文件夹 和index.js文件 动态导入svg文件

//注册svg icon组件
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
Vue.component("svg-icon", SvgIcon);

//自动加载svg目录下所有图标
//动态导入 （传递指定目录 ，不要递归，利用什么规则打包）
const req = require.context("./svg", false, /\.svg$/); //返回新函数
//遍历所有图标名称， keys返回名称的数组
//相当于动态require
req.keys().map(req);

在icon文件夹下创建文件夹svg ，并将所有的svg文件放入

main.js文件导入 icon
import '@/icon'

使用的方法
<svg-icon icon-class="dy" />