TS svg引入

1.下载svg-sprite-loade 2.在vue.config.js添加以下代码

const path = require('path')
module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    const dir = path.resolve(__dirname, 'src/assets/icons')  //确定icon所在的目录
    config.module  //config是vue把webpack的API封装暴露给我们的一个对象，让我们使用
      .rule('svg-sprite')  //添加一个规则
      .test(/\.svg$/)  //文件匹配正则就用上面的规则
      .include.add(dir).end() //规则只包含icons目录
      .use('svg-sprite-loader'/*使用svg-sprite-loader*/).loader('svg-sprite-loader').options({ extract: false }/*不要解析出文件*/).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin')), [{ pluginSprite: true }]//配置插件
    config.module.rule('svg').exclude.add(dir)//其他svg loader排除 icons目录
  }
}

3使用方法 1.引入svg

这个方式是集体引入 可以将文件里的所有svg同时引入，需要使用直接使用，无需多次引入！

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

2.使用use标签引入

4.组件化icon

<template>
   <svg class="icon">
        <use :xlink:href="'#'+name"/>
    </svg>
</template>
<script>
export default {
    props:["name"]
}
</script>

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

2.全局注册该组件

import Icon from '@/components/Icon.vue'
Vue.component("Icon", Icon)

3.使用

   <Icon name="money" />