01-elmentUI引用第三方图标

elmentUI引用第三方图标

以引用阿里巴巴尺量图为例

前言

• Vue项目已经引入ElmentUI
• 已经注册阿里巴巴尺量图账号

添加相关图标

进入官网加入图标

找到相关图标，点击购物车图标，加入到购物车中

点击添加项目

创建项目

首次添加会提示你为创建项目，点击按钮创建一个项目

项目：类似创建一个组可以加入多个图标到该组中

进入图标配置页

修改图标昵称规则适配 elmentUI

下载保存

点击下载至本地

将得到一个zip包

解压别名

将压缩包解压再进行别名

拷贝至项目中

拷贝整个文件夹到 src/assets/

导入并生效

在main.js文件中填入该内容

使用教程

进入刚解压的压缩包中，点击demo_index.html

复制<span>标签内容到指定网页位置即可使用

el-icon-xxx 这里填入图标名称

例如：<span class=“element-icons el-icon-jinriyuli-”></span>

技巧

觉得图标名称太长，可在添加项目成功后，鼠标放在图标上单击编辑 图标可以对图标名称进行修改(右下角)