项目中使用大量的ICON，今天主要说一下阿里巴巴矢量图标的引入：

一、注册阿里巴巴矢量图标账号，创建项目，添加图标进入项目，获取Font class在线链接

二、在项目中使用该链接

1、获取所有需要插入项目的链接，后期如有需要可以直接在这里添加

const cssCdnUrlList: Array<string> = [
  "//at.alicdn.com/t/c/$key.css"
]

2、把链接插入head

// 动态批量设置字体图标
export function setCssCdn() {
	if (cssCdnUrlList.length <= 0) return false;
	cssCdnUrlList.map((v) => {
		let link = document.createElement('link');
		link.rel = 'stylesheet';
		link.href = v;
		link.crossOrigin = 'anonymous';
		document.getElementsByTagName('head')[0].appendChild(link);
	});
}

3、在App.vue中引入setCssCdn 方法注册图标

onBeforeMount(() => {
	// 设置批量icon 图标
	setCssCdn();
});

4、图标的使用：要显示图标需要修改图标名称：iconfont + name

export const setIconName = (name: string) => {
	if(!name) return ''
	return `iconfont ${name}`
}

以上是添加阿里巴巴图标入项目，其他图标可自行研究