.svg-icon{宽度：1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}1.背景在elementUI+vue3中，显示svg本地图片，可以在菜单前面使用，在表格中2.Step1.在src/components中创建index.vue/SvgIcon目录，代码如下：script>/*自动导入icon组件../../Icons/svg*下面的所有icon之后，我们就要用到webpack的require.context。很多人可能对require.context不熟悉。直截了当的解释是require.context("./test",false,/.test.js$/);这行代码会去test文件夹（不包括子目录）下面找到所有文件名以.test.js结尾的文件，可以require。说白了，我们可以通过正则匹配导入对应的文件模块*/constrequireAll=requireContext=>requireContext.keys().map(requireContext)constreq=require.context('../../assets/svg',false,/\.svg$/)//svg图片位置requireAll(req)exportdefault{name:'SvgIcon',props:{iconClass:{type:String,required:true},className:{type:字符串，默认值：''}}，计算：{iconName(){return`#icon-${this.iconClass}`},svgClass(){if(this.className){return'svg-icon'+this.className}else{return'svg-icon'}}}}.svg-icon{宽度：1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}2.在src/main.js中注册全局组件SvgIcon)3.src/assets/svg目录下，放置使用到的svg图片文件4.配置vue.config.jsnpmisvg-sprite-loader-Dnpmisvg-baker-runtime-DchainWebpack:config=>{constsvgRule=config.module.rule('svg')svgRule.uses.clear()svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'icon-[name]'})}5、引用
