将SVG1直接引入到VUE项目中。首先，在Iconfont中下载好svg文件后，放到本地的src/assets/icons中。2、我直接在组件中导入引用，此时TS报错。TS2307找不到模块。3.爬墙搜索。4.根据答案操作。将其粘贴到shims-vue.d.ts中。声明模块'*.svg'{constcontent:string;exportdefaultcontent;}5.回去看import，没有报错。6.但是发现引入了一个字符串，就是svg的路径。我要介绍的是如何使用SVG。7、去搜一下大家是怎么引用的，知道最流行的导入svg的方式是使用Svg-sprite-loader。8.安装yarnaddsvg-sprite-loader-D9.在vue.config.js中添加constpath=require('path')module.exports={"lintOnSave":false,"transpileDependencies":["vuetify"],config.module.rule('svg-sprite').test(/\.svg$/).include.add(dir).end()//包含图标目录.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)//其他svgloader排除图标目录//config.module//.rule('svg-sprite')//.test(/\.(svg)(\?.*)?$/)//.include.add(dir).end()//.use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({extract:false}).end()//.use('svgo-loader').loader('svgo-loader')//.tap(选项=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})//.end()//config.plugin('svg-sprite').use(require('svg-精灵-loader-mod/plugin'),[{plainSprite:true}])//config.module.rule('svg').exclude.add(dir)}}10.这时候可以在项目中使用use标签引入图标但是如果我们项目中的图标比较多，这样导入会很麻烦。如何快速引入多个图标？1.导入整个目录letimportAll=(requireContext:__WebpackModuleApi.RequireContext)=>requireContext.keys().forEach(requireContext);try{importAll(require.context(path:'../assets/icons',true,/\.svg$/));}catch(error){console.log(error);}二、封装一个Icon组件1、在components中新建一个Icon组件。2.使图标在全球可用。从'@/components/Icon.vue'引入Icon导入图标；Vue.component('Icon',Icon)inmain.ts3.直接在组件中使用Icon组件。名称是您要传递的svg的ID。这样一来，介绍起来就非常方便，效率也很高。
