vue中使用iconfont(Symbol引用)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、准备步骤

1.首先打开iconfont图标库

iconfont-阿里巴巴矢量图标库

2.将图标加入购物车

3.将图标添加到项目

4.下载到本地

二、在vue中使用

三种引用方式

1.将文件拷贝到文件夹目录下

2.在main.js中引入

//引入iconfont
//1.Symbol方式
import '@/assets/iconfont/iconfont.js'
//2.Font class方式
import '@/assets/iconfont/iconfont.css'

3.加入通用 CSS 代码

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4.挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

5.效果展示