react 使用iconfont 图标

1.动态调用

一、引用到路由中

 

注意，不要错误引用到.css链接，正确的是symbol下的js链接！（血的教训）

复制链接后，打开项目中的config->defaultSetting.ts

 

将复制好的链接粘贴到iconfontUrl中。

之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！

 

 

 

二、引用到页面中

在项目中的 src->component 下新建文件夹，名字可自己取

 

文件夹下新建一个index.jsx文件，文件内容如图所示。

​
import { createFromIconfontCN } from "@ant-design/icons";

// 使用：

// import IconFont from '@/components/IconFont';

*// *

let NewIconFont = createFromIconfontCN({ scriptUrl: 'https://at.alicdn.com/t/c/font_3481009_bylhrlvnk5o.css' });

export default NewIconFont;

​

 

注意，这边放 的是文件引用过来的.css文件，不是js文件

页面引用，后可直接使用到需要放置的地方

 

 

2.静态调用

通过将iconfont中的项目（所有iconfont）下载到本地，再引用也可以的实现。

 

下载后，将文件解压，放在项目中的public文件夹下即可。

 

再打开项目中的config->defaultSetting.ts引入对应iconfont.js的相对路径

 

路由中使用：

 

 页面中调用与动态引用一样。