vue项目中使用.svg图标的两种方式

最近项目中要求使用svg图片格式作为项目图标，以适应放大缩小后的效果

自己总结了以下两种方式：

第一种 类似iconfont

1. 去字体图标制作网站icomoon.io
   
2. 点击“IcoMoon App”，然后点击右上角“IcoMoon App”
   
   出来如下图界面：
   
   此界面中你可以导入自己的svg图，也可以选择系统里自带的并勾选，总之，选好需要制作的图标后，点击右下角“Generate Font”，出现如下界面
   

可以点击“”这个按钮，进行图标属性的一些更改


设置好以后关闭弹框，点击右下角“Download”按钮

下载好以后，如下图，选择font文件夹和style.css两个文件粘贴到你的项目，之后就可以在页面中使用图标

使用方式很简单，就像阿里巴巴字体图标库一样，在dom元素中的class设置相应图标名称

第二种 封装svg

我的项目之前是已经封装好的svg，所以我是需要啥图标直接下载好后仍进去，名字改一下就好了

所有svg图片的命名方式都是：icon-图标名

然后界面中直接使用的话如下方式：

具体封装方法我没试过，网上有很多类似这个https://juejin.im/post/5bcfdad4e51d457a8254e9d6