vue 引入 阿里巴巴矢量图的步骤

1: 登录阿里巴巴  矢量图库:http://www.iconfont.cn/home/index

vue 引入 阿里巴巴矢量图的步骤

 

2:创建自己的项目:

 

vue 引入 阿里巴巴矢量图的步骤

 

vue 引入 阿里巴巴矢量图的步骤

 

按照模板填写:

Symbol 前缀   和 Font Family  必须这样写, 因为 在vue里面 是el-icon-xxx 这样引入的,避免命名不一致。

vue 引入 阿里巴巴矢量图的步骤

 

 

项目创建完成:

vue 引入 阿里巴巴矢量图的步骤

 

 

回到 矢量图图主页, 找到自己需要的图标, 加入项目。

1:进入图标库

vue 引入 阿里巴巴矢量图的步骤

2:找到自己要的图标

vue 引入 阿里巴巴矢量图的步骤

 

3:在自己要的图标上 点击 购物车图标 加入购物车

vue 引入 阿里巴巴矢量图的步骤

 

4:点击右上角的购物车

vue 引入 阿里巴巴矢量图的步骤

 

5:这里会有自己选择加入的图标, 点击  添加至项目  的按钮

vue 引入 阿里巴巴矢量图的步骤

6:选择刚刚创建的项目

vue 引入 阿里巴巴矢量图的步骤

 

7: 选择  Font class

vue 引入 阿里巴巴矢量图的步骤

 

8:下载至本地

vue 引入 阿里巴巴矢量图的步骤

 

9: 下载后解压

vue 引入 阿里巴巴矢量图的步骤

 

10: 删除红色标记的四个文件

vue 引入 阿里巴巴矢量图的步骤

 

11:在vue项目的 src > ssets 下新建  icon文件夹, 将剩下的六个文件 放进去

vue 引入 阿里巴巴矢量图的步骤

 

12: 在 main.js 中 引入  iconfont.css 文件

vue 引入 阿里巴巴矢量图的步骤

 

13: 在页面中引入 图标, 在仓库中, 图标的名字是   el-icon-denglu, 那么在页面中 就引入这个名字就可以了。

vue 引入 阿里巴巴矢量图的步骤

 

 

vue 引入 阿里巴巴矢量图的步骤

 

界面效果:

vue 引入 阿里巴巴矢量图的步骤