一. 安装svg-loader

npm install svg-sprite-loader -D

or

yarn add --dev svg-sprite-loader -D

二.往以.d.ts结尾的文件中写入下面声明的代码

declare module "*.svg" {
  const content: string;
  export default content;
}

三. vue cli 3以上由于没有单独的文件进行webpack设置（vue cli 2可以在webpack.config.js），需要在vue.config.js中写入以下代码

//有些编辑器(比如webstorm)中下段代码可能会报错，为保险起见需要加入 /* eslint-disable */通知编辑器不需要检查该配置
/* eslint-disable */
const path = require('path');
module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')
    config.module
      .rule('svg-sprite')  //添加规则
      .test(/\.svg$/)      //正则表达式表示以.svg结尾的
      .include.add(dir).end()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
       
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end();//由于svg中若存在fill属性，则无法更改颜色，为了防止出现svg图标出现有色的状态加入此配置不影响后期开发者用css对图标进行颜色上的控制
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}]);
    config.module.rule('svg').exclude.add(dir);
  }
}

四.若添加了更改svg fill属性的那段代码，则需要重新安装下面的依赖

yarn add --dev svgo-loader

五.使用svg

<template>
	<svg>
    	<use v-bind:xlink:href="#id">
    </svg>
</template>
<script lang="ts">
import x from '@/assets/icons/laebls.svg';
    console.log(x)'
</script>

结果为 若有很多的svg需要引入的时候需对代码进行优化

//子组件给父组件Icon中传name
<template>
	<div>
    	<Icon name="laebls"/>
    </div>
</template>
<script>
const importAll =(requireContext: __WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
    try{
        importAll(require.context('../assets/icons',true,/\.svg$/));
    }catch(err){
        console.log(err);
    }
</script>    

<template>
        <svg>
            <use :xlink:href = "'#'+ name " />
        </svg>
</template>

<script>
    export default {
        props:['name'],
        name: "Icon"
    }
</script>