/*自定义默认图标样式*/.svg-icon{width:1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}以前的方法：在iconfont官网搜索需要的图标，添加到库中，添加到项目中，下载素材到本地页面，导入字体文件。使用方法：缺点：项目要添加新建图标时，需要重复以上操作，重新下载叠加文件，手动划分解决方案：使用svg-sprite-loader自动加载打包，方便维护//项目默认配置文件|--vue3.0-project|--node_modules|--public|--src|--assets|--组件|--图标|--视图|--App.vue|--main.js|--.gitignore|--babel.config.js|--package-lock.json|--package.json|--README.en.md|--README.md|--vue.config.js1.安装依赖svg-sprite-loader$cnpminstallsvg-sprite-loader-D2.vue.config.js配置1.引入path模块处理文件路径constpath=require('path')//获取绝对路径functionresolve(dir){returnpath.join(__目录名，目录）}2。配置规则module.exports={//链式webpack配置chainWebpack(config){//svg规则配置，排除图标目录config.module.rule('svg').exclude.add(resolve('src/icons')).end()//添加图标规则，设置svg-sprite-loaderconfig.module.rule('icons')//创建规则'icons'.test(/\.svg$/)//检测到的特定目录。include.add(resolve('src/icons'))//只考虑'.end()在src/icons目录中.use('svg-sprite-loader')//使用.loader('svg-sprite-loader')//指定加载器.options({symbolId:'icon-[name]'})//选项配置，以后会用到图标的名字，例如：icon-qq}}查看所有规则$vueinspect--rules['vue','images','svg','media','fonts','pug','css','postcss','scss','sass','less','stylus','js','eslint','icons']查看当前配置的图标规则$vueinspect--ruleicons/*config.module.rule('icons')*/{test:/\.svg$/,include:['E:\\Code\\gitee\\vue3.0-project\\src\\icons'],使用:[{loader:'svg-sprite-loader',options:{symbolId:'icon-[name]'}}]}第三，编写svg-icon组件(srccomponentsSvgIcon.vue)/*自定义默认图标样式*/.svg-icon{width:1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}4.配置图标文件和目录（srcicons），将svg图标文件放在srciconssvg下（每次添加新文件，把svg文件放在这个文件下即可，不用重复配置）示例：src\icons\svg\qq.svg全局组件注册，图标规则匹配（srciconsindex.js）importVuefrom'vue'//importsvgIcon组件importSvgIconfrom'@/components/SvgIcon'//全局注册svg-icon组件Vue.component('svg-icon',SvgIcon)//require.context指定规则匹配constreq=require.context('./svg',false,/\.svg$/)//keys=》['qq.svg','wx.svg']req.keys().map(req)5.全局导入图标配置文件(srcmain.js)//src\icons\index.jsimport'./icons'6.使用
