Vue typescript引入svg

先安装 svg-sprite-loader，配置 vue.config.js

const path = require('path'); //引入path模块
module.exports = {
  lintOnSave: false,

  //添加chainWebpack
  chainWebpack:config=>{

    const dir = path.resolve(__dirname,'src/assets/icons')//获取文件路径
    config.module
        .rule('svg-sprite')
        .test(/\.svg$/) //规则
        .include.add(dir).end()  //只包含icons目录
        .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()     //{extract:false} 不要解析成文件
        .use('svgo-loader').loader('svgo-loader')
        .tap(option=>({...option,plugins:[{removeAttrs:{attrs:'fill'}}]})).end();//svgo-loader用来删除自带的fill属性（默认颜色）

    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) //其他svg loader 排除icons目录
  }
}

在项目中引入

//将目录中的svg文件全部引用
let importAll = (requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);
try {
  importAll(require.context('../assets/icons',true,/\.svg$/));//文件夹路径
}catch (error)
{
  console.log(error);
}

然后body 里面就会有一个svg标签 标签里面有很多symbol 每个symbol有id属性 引入成功后我们就可以使用

<svg>
<use xlink:href="#id" /> //id是symbol的id名
<svg/>

安装 svgo-loader 可以删除svg文件的fill属性（默认颜色），你也可以手动删除这个fill属性