为什么推荐svg图标？
缺图标时，通常我们都会选择阿里图标库
为了避免不断变更的图标需求，导致反复更新图标地址或重新下载整个项目的图标，推荐将图标下载到本地。
与png格式相比，svg格式有以下优点：
- 同尺寸的图标，svg所占空间更小
- SVG是矢量图文件，可以随意改变大小，同时不影响图标质量。
- svg图标既可以通过.svg文件引入html中，也可以直接使用svg代码渲染（svg代码还可以便捷修改成任意想要的效果）
- 可以用CSS样式自由定义图标颜色，尺寸等。
- 所有的SVG可以全部放在一个文件中，节省HTTP请求。
- 使用SML.CSS或者js可以制作有交互动画的效果。
- 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文件的方法：
- 以del.svg文件为例，在src/svg中新建空白文件del.svg
- 将从阿里图标库一键复制的svg代码粘贴到del.svg文件中保存即可。
