Vue使用阿里巴巴iconfont彩色字体

下载字体库

在“我的项目”中下载至本地

将下载的文件放入vue项目中

下载的压缩包：

复制到vue项目中

其中iconfont.css文件需配置文件路径

配置vue引用

main.js

import './styles/iconfont.css';
import './styles/iconfont/iconfont';

index.html

<link rel="stylesheet" href="./src/styles/iconfont.css">

vue文件中调用图标

<svg class="icon" aria-hidden="true" style="font-size: 25px">
	<use xlink:href="#*************" />
</svg>

自定义*************内容，星花部分为Symbol模式下的图标名称
例如

<svg class="icon" aria-hidden="true" style="font-size: 25px">
	<use xlink:href="#icon-test-boluo" />
</svg>

至此，大功告成