iconfont-阿里图标库 的使用

阿里巴巴iconfont的使用方式分为两种：

1. 本地下载
2. 线上引用

iconfont-阿里巴巴矢量图标库

前期准备

创建项目，添加icon图标。

1.本地使用

1.点击“1”“3”下载项目至本地

2. 参考：iconfont-阿里图标库 的使用_阿里图标库iconfont-CSDN博客

2.线上引用

1.点击“1”“2”生成在线链接

Unicode ：

在 unicode 下，每个 icon 都有一个 unicode 编码，下面以 unicode 编码为` `的 icon 为例进行说明。

选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

@font-face {
  font-family: 'iconfont';  /* Project id 4548187 */
  src: url('//at.alicdn.com/t/c/font_4548187_32h6iq9gfl2.woff2?t=1715763466991') format('woff2'),
       url('//at.alicdn.com/t/c/font_4548187_32h6iq9gfl2.woff?t=1715763466991') format('woff'),
       url('//at.alicdn.com/t/c/font_4548187_32h6iq9gfl2.ttf?t=1715763466991') format('truetype');
}

将此代码放进一个全局的样式文件中，比如 dcom.less、dcom.scss......
在页面中使用的时候：

<i class="iconfont">&#xe63f;</i>

若在线 icon 有更新，需要“选择查看在线链接”，然后复制在线生成的代码，在项目中的 iconfont.less 文件中将最新的代码替换就好了。

Symbol：

在 Symbol下，选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

//at.alicdn.com/t/c/font_4548187_32h6iq9gfl2.js

将此代码放进main.js、main.ts文件

import '//at.alicdn.com/t/c/font_4548187_32h6iq9gfl2.js';

在svg标签中正常使用

<svg data-v-4a714f7d="" data-v-862e34a3="" class="svg-icon" aria-hidden="true">
	<use data-v-4a714f7d="" xlink:href="#icon_dcom_1" fill="#ffffff"></use>
</svg>

'#icon_dcom_1',是icon在Symbol下的名字，其中'icon_dcom_'是名称前缀，需要在项目设置里进行配置。

注：每次更新/变动图标库后，都需要进行重新生成在线链接并更新main.ts

Font class：

下载的css文件，运用和Symbol差不多

......

www.iconfont.cn网断了，暂停