react如何使用阿里的字体图标?

比较简单，参考这篇文章
https://segmentfault.com/a/1190000016639485

umi如何使用阿里的字体图标?

首先选好所需的字体图标，下载下来
在官方demo中有三种用法，这里说前两种

下载字体图标文件存放到Public目录下的iconfont目录

index.less

// 阿里图标区域
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('~@/public/iconfont/iconfont.ttf?t=1658979237789') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lianlu:before {
  content: "\e837";
}

.icon-jiangshi:before {
  content: "\e6e6";
}

.icon-anquanzhongxin:before {
  content: "\e895";
}

.icon-icon_yingyongguanli:before {
  content: "\eb8f";
}

.icon-yewu:before {
  content: "\e66c";
}

.icon-shengyuzhibiao:before {
  content: "\e62b";
}

.icon-suyuan:before {
  content: "\e997";
}

.icon-gongxiang:before {
  content: "\e612";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

App.jsx

import styles from './index.less';
1

<i className={`${styles['iconfont']}`} ${styles['icon-lianlu']}`} />
1

一、Font class 用法（用的最多的一种）

1、在index.js中引入 index.less(字体库下载的文件里有这个，找到它引进来)，并按照图库的demo命名

2、在iconfont.css/less中修改路径@font-face路径，将其修改为自己存放iconfont.ttf文件的地址

二、Unicode用法:（比较原始）

1、和demo例子用法一样。在自己的index.css/less里按照demo引入

2、在自己的App.jsx（代入你自己的组件名）使用(注意：umi里默认引入css/less是以对象方式引入的，避免全局污染css和类名冲突，直接import './index.less’ (css也一样)是无效的，通过配置可以生效，正确使用如下)

三、symbol 引用

https://www.iconfont.cn/help/detail?helptype=code