vue项目引入iconfont(阿里巴巴矢量图标库)

阿里巴巴矢量图标网址:https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3818294

一、方式1:项目中使用usicon引用图标

1.下载代码

选择图标加入项目中后,下载图标代码

image

下载后解压

image

2.Vue项目中styles文件夹新建us_icon_font.scss文件,引入下载的图标文件

image

@font-face {font-family: usicon;src: url("iconfont.ttf?t=1694681005435") format("truetype");
}

3.VUE项目main.ts文件中全局引用样式文件

image

import "@/styles/us_icon_font.scss";