vuecli3.0使用svg全流程

.svg-icon{宽度:1米;高度：1em；垂直对齐：-0.15em；填充：当前颜色；溢出：隐藏；}.svg-external-icon{背景颜色：currentColor；面具尺寸：覆盖！重要；显示：内嵌块；VUE-cli3使用svg-sprite-loadersvg-sprite-loader插件根据导入的svg文件自动生成符号标签插入到html1中。安装依赖npminstallsvg-sprite-loader\--save-dev2。配置视图。config.js文件webpack配置，在Vue.config.js中添加loader处理svgconstpath=require('path')functionresolve(dir){returnpath.join(__dirname,'.',dir)}module.exports={chainWebpack:config=>{config.module.rules.delete('svg')//重点：删除默认配置中的处理svg,//constsvgRule=config.module.rule('svg')//svgRule.uses.clear()config.module.rule('svg-sprite-loader').test(/\.svg$/).include.add(resolve('src/icons'))//处理svg目录.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'icon-[name]'})},}3.创建一个新的SvgIcon在src/components.vue文件下.svg-icon{宽度:1米;高度：1em；垂直对齐：-0.15em；填充：当前颜色；溢出：隐藏；}.svg-external-icon{背景颜色：currentColor；面具尺寸：覆盖！重要；显示：内嵌块；4。在src下新建文件夹utils和文件validate.js，参考vue-element-admin中svg配置https://panjiachen.github.io/.../***PanJiaChen于16/11/创建18.*//***@param{string}path*@returns{Boolean}*/exportfunctionisExternal(path){return/^(https?:|mailto:|tel:)/.test(path)}/***@param{string}str*@returns{Boolean}*/exportfunctionvalidUsername(str){constvalidmap=['admin','editor']returnvalidmap.indexOf(str.trim())>=0}5.src下新建icons文件夹，并新建svg文件夹，index.js文件，svgo.yml文件index.jsimportVuefrom'vue'importSvgIconfrom'@/componentsicons文件夹下/SvgIcon'//svgcomponent////全局注册Vue.component('svg-icon',SvgIcon)constreq=require.context('./svg',false,/\.svg$/)constrequireAll=requireContext=>requireContext.keys().map(requireContext)requireAll(req)svgo.yml#替换默认配置#multipass:true#full:trueplugins:#-name##or:#-name:false#-name:true##or:#-name:#param1:1#param2:2-removeAttrs:attrs:-'fill'-'fill-rule'6.在main.js中引入svgimport'./icons'7.使用svg图标，把svg图标在icons/svg文件夹下，icon-class的值就是你的svg图标文件名