Uniapp引入和使用阿里矢量图

步骤一:

登录阿里矢量图官网

将所需要引入的矢量图添加入库然后添加至项目

Uniapp引入和使用阿里矢量图_第1张图片

Uniapp引入和使用阿里矢量图_第2张图片

步骤二:

生成代码

Uniapp引入和使用阿里矢量图_第3张图片

点击更新代码生成

Uniapp引入和使用阿里矢量图_第4张图片

步骤三

打开uniapp项目在app.vue下全局引入

在定义字体格式时地址引入图中红框内的地址,以后所需图标重新加入生成代码是再重新替换

Uniapp引入和使用阿里矢量图_第5张图片

 注意:引入的字体格式地址需要在前面加上https:

Uniapp引入和使用阿里矢量图_第6张图片

Uniapp引入和使用阿里矢量图_第7张图片Uniapp引入和使用阿里矢量图_第8张图片

注意:当需要放置编码的是伪元素的content属性时,需要将该编码的前三位用 “ \ ”替换。否则图标将不会出现,比如将  替换为 \e640;  

步骤四

在页面使用

最终效果

Uniapp引入和使用阿里矢量图_第9张图片

你可能感兴趣的:(前端)