在vue项目中使用阿里svg矢量图

2023-07-18 16:14| 来源: 网络整理| 查看: 265

在vue项目中使用阿里svg矢量图 1、进入阿里svg矢量图官网：官网地址 2、进入图标库 => 所有图标库

在这里插入图片描述

3、搜索图标

在这里插入图片描述支持拼音、汉字、英语

4、将选中图标加入购物车

在这里插入图片描述

5、进入购物车，选择【添加至购物车】如若没有创建的项目，请先点击【加入项目】后的【添加】按钮创建新项目在这里插入图片描述

6、点击确定进入【我的项目】界面

在这里插入图片描述

7、选中symbol，并下载到本地 8、引用

将iconfont.js文件解压到项目src目录下的assets文件夹下的js文件夹下(如若没有该文件目录请自行创建) 在这里插入图片描述文件目录表：

在这里插入图片描述

9、在main.js文件中引入iconfont import './assets/js/font_1987881_z2auf9al3jo/iconfont'

font_1987881_z2auf9al3jo是自行随机生成的文件夹

10、应用于页面

// xlink:href="#图标名称" 11、获取图标名称打开demo_index.html文件在这里插入图片描述

选中symbol项

井号后的就是图标名称

在这里插入图片描述

12、在全局样式中加入通用 CSS 代码（引入一次就行） .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

如每个图标的样式都不相同，可在使用图标的组件中单独加上样式

.icon { color: #05d1ca; // 颜色 font-size:14px; // 大小 } 13、添加新图标

在当前的图标项目中添加了新的图标后只需将新的文件重新下载到本地，然后更换js下的iconfont.js文件即可

【本文地址】

公司简介

联系我们