vue实战——图标，请使用SVG！（含插件vue-svg-icon的使用）

为什么推荐svg图标？

缺图标时，通常我们都会选择阿里图标库

https://www.iconfont.cn/

为了避免不断变更的图标需求，导致反复更新图标地址或重新下载整个项目的图标，推荐将图标下载到本地。

与png格式相比，svg格式有以下优点：

1. 同尺寸的图标，svg所占空间更小
   
2. SVG是矢量图文件，可以随意改变大小，同时不影响图标质量。
   
3. svg图标既可以通过.svg文件引入html中，也可以直接使用svg代码渲染（svg代码还可以便捷修改成任意想要的效果）
   
4. 可以用CSS样式自由定义图标颜色，尺寸等。
   
5. 所有的SVG可以全部放在一个文件中，节省HTTP请求。
   
6. 使用SML.CSS或者js可以制作有交互动画的效果。
   
7. SVG也是一种XML文件，所以可以使用gzip的方法把文件压缩到很小。
   

Vue中使用SVG图标的方法

1. 安装插件vue-svg-icon

npm install vue-svg-icon --save-dev

2. 注册全局组件svgIcon

main.js文件中

import svgIconfrom 'vue-svg-icon/Icon.vue'
Vue.component('svgIcon', svgIcon)

3. 下载svg图标

在src文件下新建文件夹svg，所有下载的SVG图标放入其中。

批量下载图标的方法，可参考链接

https://blog.csdn.net/weixin_41192489/article/details/120491304

4. 使用svg图标

以del.svg图标为例，修改scale的值调整图标的大小。

<svgIcon name="del" :scale="1" />

SVG代码转换为.svg文件

阿里图标库可以便捷的一键复制svg代码

svg代码可以直接粘贴在目标页面中使用，也可以存为.svg文件供所有页面调用。

svg代码存为.svg文件的方法：

1. 以del.svg文件为例，在src/svg中新建空白文件del.svg
2. 将从阿里图标库一键复制的svg代码粘贴到del.svg文件中保存即可。