.za-svg-icon{宽度：20px；高度：20px；垂直对齐：中间；填充：当前颜色；overflow:hidden;}主流图标使用方式Sprite图片背景定位imgiconfontsymbolsvg-sprite工作原理利用svg的symbol元素将每个图标包含在symbol中，通过use元素来使用symbol。点击查看详细原理。svg-sprite的优缺点优点：修改ID换图标，简单易用。页面代码量少，维护成本低。图标可以改变颜色和大小，减少重复图片的加载，减少图片请求量。缺点：多色、渐变色等无法通过颜色值改变图标颜色，需要设计者重新设计图标。浏览器渲染性能一般。浏览器兼容性差，支持ie9+，现代浏览器。工具一、懒人神器svg-sprite-loader解决的痛点根据导入的svg文件自动生成符号标签（svgsprite图片）插入到html中。安装npminstallsvg-sprite-loader--save-devvue-cli2.0webpack配置需要做后台svg图片处理方法：在处理svg的loader中添加exclude，表示不需要使用loader来处理图标。//build/webpack.base.conf.js{测试：/\.(png|jpe?g|gif|svg)(\?.*)?$/，排除：[resolve('src/assets/icons/svg')],loader:'url-loader',options:{limit:10000,name:utils.assetsPath('img/[name].[hash:7].[ext]')}}需要是一个icon图片处理方法：对include中的svg文件进行Sprite图片处理。option可以设置symbolID，如果不设置，默认id为svg文件名。//build/webpack.base.conf.js{test:/\.svg$/,include:[resolve('src/assets/icons/svg')],loader:'svg-sprite-loader',选项：{symbolId:'icon-[name]'//指定symbolId，不指定默认为svg文件名}}vue-cli3.0webpack配置webapck配置自定义，参考官方demo//vue.config.jsconstpath=require('path')functionresolve(dir){returnpath.join(__dirname,'./',dir)}module.exports={chainWebpack:config=>{config.module.rule('svg'）。排除。add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'[name]'})}}如何在page配置好后，直接在页面上使用即可。组件内容如下：//src/components/SvgIcon.vue.za-svg-icon{宽度：20px；高度：20px；垂直对齐：中间；填充：当前颜色；overflow:hidden;}现在使用组件只需要两个步骤。import'./assets/icons/svg/za-icon-supplier.svg'自动导入最后一个问题就是每次都需要导入使用图标。可以使用webpack的==require.context==方法动态导入icon图标。具体文件点击这里。importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon.vue'//统一注册svg-icon组件Vue.component('svg-icon',SvgIcon)//遍历require.context和返回的模块importingconstrequireAll=requireContext=>requireContext.keys().map(requireContext)//importallqualifiedsvg三个参数：文件夹，是否使用子文件夹，正则constreq=require.context('@/assets/icons/svg',true,/\.svg$/)requireAll(req)现在只需要在页面直接使用svg-icon组件，修改icon-class即可显示图标。2、如何使用iconfont的符号步骤一：复制项目下生成的符号代码：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js步骤二：添加通用css代码（导入一次）：.icon{width:1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；溢出：隐藏；}第三步：选择对应的图标，获取类名，应用到页面：
