Web项目中以矢量方式引用iconfont的图标

iconfont的图标很丰富，之前主要有两种使用方式：

• 导出为png图片使用，这种方式在图片缩放时清晰度是个问题；
• 导出为svg，在项目中引入可以显示svg的库，这个在新建一个项目时，需要做一定的配置，需要依赖外部的库。

所以两个都比较麻烦，最近发现一个比较简单的可以矢量字体的方法，记录如下：

• 先在界面上选择需要的图标，添加到购物车
• 如果是项目开发使用，则最后把这些都添加到一个命名项目中，这样随着项目开发过程中需要对图标进行增补、修改时，直接修改项目内的图标，再重新下载即可，再者如果即使项目开发完，后续维护中需要对项目做修改，有这个项目中存档，也是蛮方便的；
• 从购物车里（或者项目库），将图标下载为代码，如下图
  
• 解压之后，包含如下文件，如果是font class使用方式，只需要使用后缀为css和ttf两个文件即可；
  
• 点击demo.html，可以查看这个图标库包含哪些图标，并且有unicode,font class, symble三种方式的用法介绍，很人性化；
  
• 将这些个文件拷贝到项目目录，比如放到static/iconfont目录下，可以把这些文件都拷贝过来，这样以后需要查看究竟在iconfont.ttf内包含了哪些图片，就可以打开demo.html查看
• 在需要使用图标的组件内引入iconfont.css，比如
  比如在vue文件内是这样引入

<style lang="scss" scoped>
	@import "./iconfont.css";
</style>

• 然后在template中这样用

<span class="iconfont icon-leftarrow"></span>

大致就是这样了，其实可以在App.vue中全局引入，然后在项目中都可以用了，这样更方便点。