在 Vue 中使用 iconfont

• 在一个完整的项目中，我们对于 icon 图标的处理已经不经常使用之前的 雪碧图，png 等图片格式了，首先图片会占据我们项目的大量空间，图片多的话可能会使得打包之后的项目包特别大，而这些不是我们所期望的，因此我们需要在这里引入阿里的 iconfont
• 百度搜索 iconfont
• 点进去之后登录 在首页的资源管理下拉处找到我的项目点进去
• 点进去之后 界面右边有一个新建项目，一般我们一个项目 建立一个矢量图标库，也有可能分模块，分期数都有可能
  
• 点进去之后 输入主要信息，项目名称，项目名称–模块，项目名称–二期 等等 看团队规划，新建完成后就会跳转到你这个新建的项目库里，如下图
• 到这里我们的 iconfont 项目库就已经建好了，点击首页开始找我们需要的，一般是 ui 和产品经理 沟通选择，我们点击图标点击收藏，等选好之后我们点击右边的购物车
• 在这里我们会看到我们所有选择的图标，点击添加至项目，选择好项目之后点击确定即可
• 添加完成之后就会跳转到我们的项目里，在这里可以看到我们选择的 icon 点击下载至本地，我们把这个下载下来
• 下载完成后打开 里面是这个样子的
• 到这里我们就把我们项目中需要的 icon 下载下来了

我们接下来看如何引用

• 打开我们的项目，在 src 目录下新建 styles 文件夹，里面新建 iconfont 文件夹，把我们下载的东西直接放进去
  

• 在 main.js 里面引入我们的 css 文件

// main.js
import "@/styles/iconfont/iconfont.css";

• 引入之后我们就可以直接使用了，打开 iconfont.css 文件我们可以看到我们刚刚下载的所有的 font-class 类名
  
• 使用的时候我们随便给个标签 i，span 都可以，加上我们需要的类名就可以直接使用了
  

如果需要增减 icon 我们只需要添加完成之后重新下载，用下载的文件替换掉 icon 的旧文件就可以了，大家去试试吧