vue 引入 阿里巴巴矢量图的步骤
1: 登录阿里巴巴 矢量图库:http://www.iconfont.cn/home/index
2:创建自己的项目:
按照模板填写:
Symbol 前缀 和 Font Family 必须这样写, 因为 在vue里面 是el-icon-xxx 这样引入的,避免命名不一致。
项目创建完成:
回到 矢量图图主页, 找到自己需要的图标, 加入项目。
1:进入图标库
2:找到自己要的图标
3:在自己要的图标上 点击 购物车图标 加入购物车
4:点击右上角的购物车
5:这里会有自己选择加入的图标, 点击 添加至项目 的按钮
6:选择刚刚创建的项目
7: 选择 Font class
8:下载至本地
9: 下载后解压
10: 删除红色标记的四个文件
11:在vue项目的 src > ssets 下新建 icon文件夹, 将剩下的六个文件 放进去
12: 在 main.js 中 引入 iconfont.css 文件
13: 在页面中引入 图标, 在仓库中, 图标的名字是 el-icon-denglu, 那么在页面中 就引入这个名字就可以了。
界面效果: