Vue项目中使用svg

一 配置

安装loader

yarn add svg-sprite-loader --dev

vue.config.js文件配置（没有在根目录创建）

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$/)
      .include.add(dir).end()//dir这个路径下的svg使用这个loader
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()

    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}])
    config.module.rule('svg').exclude.add(dir)//vue-cli默认情况下会使用url-loader对svg进行处理，让url-loader只处理除dir文件夹外的svg
  }
}

当loader发现文件中引入了svg，就会把svg变成一个symbol标签，接着把symbol标签放到svg标签中，最后会将svg标签放入body中。

二 Icon组件

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

<script lang="ts">
  const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}

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

<style lang="scss" scoped>
  .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

三 使用

<Icon name="xxx"/>