vue
iconfont和SVG的区别 1，iconFont采用字体渲染，放大容易失真，会出现明细的锯齿；SVG采用图形渲染，不管怎么放大都不会失真。2，iconFont图标色调单一，只支持单色；SVG可以做出生动又复杂的图标。3，iconFont载入需附带很多其他资源，且文件较大影响加载速度；SVG文件小且单个引用，灵活快捷，可以减少HTTP请求。
SVG是什么SVG是一种可缩放的矢量图形（全称Scalable Vector Graphics），基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式，支持交互的和动态可以在SVG文件中嵌入动画元素或通过脚本来定义动画。
如何使用SVG在Vue中，使用SVG我们可以通过svg-sprite-loader插件来实现，所以这里我们先来安装svg-sprite-loader插件，执行命令：npm install svg-sprite-loader --save即可将svg-sprite-loader插件安装到项目中（当前版本4.1.6）。
定义SvgIcon组件在定义一个SvgIcon组件，在components目录中创建一个SvgIcon.vue文件，定义svg标签，通过use在SVG文档内取得目标节点,并在别的地方复制它们，然后将其粘贴到use元素的位置，通过xlink:href属性定义读取和显示被链接的资源。
注册组件定义好组件之后我们就要将该组件进行全局注册，在存放svg位置定义即可，这里我在assets目录下定义了icons目录，svg目录用来存放对应的svg文件，再icons目录中创建一个index.js文件来配置全局使用以及名字处理。
全局引入刚才我们注册了组件，你可以在想要使用的地方单独引入该文件即可 使用SvgIcon组件，当然你也可以将其全局注册，这样就不用在组建中引入了，我们只要在main.js中引入刚才的js文件即可：import '@/assets/icons/index.js'
更新webpack配置（重点）Vue中默认情况下会使用 url-loader 对svg进行处理，所以在安装svg-sprite-loader之后我们要对配置进行修改（先清除默认的处理方案，在自定义新的处理方案），在Vue2.0中可以直接在webpack.base.conf.js文件中进行配置，现在我们用的是Vue3.0，所以我们在跟目录下新建一个vue.config.js文件来配置，配置如下图所示：
SvgIcon组件使用到目前为止我们已经全局注册好了组件，现在我们只要在需要使用到svg图标的地方引入改组件即可，通过svg-icon标签来引入标签，icon-class传入制定的图标名称即可，如引入用户头像（
默认情况下，显示的是svg的原图大小，所以我在svg-icon外面定义了一个div，用来控制图案的大小，当然你也可以直接在组件中定义图标的大小，看项目需求吧。