React项目中如何结合antd引入阿里图标(外联方式)

在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库?

一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地

React项目中如何结合antd引入阿里图标(外联方式)_第1张图片

 二、1、在React项目的根目录下创建一个static静态文件夹

React项目中如何结合antd引入阿里图标(外联方式)_第2张图片

2、将需要的字体脚本放入 public 目录下

React项目中如何结合antd引入阿里图标(外联方式)_第3张图片

 三、1、使用antd中的createFromIconfontCN解决图标资源本地化的问题

React项目中如何结合antd引入阿里图标(外联方式)_第4张图片

2、createFromIconfontCN 的 scriptUrl 中写入自己字体脚本的相对路径字符串(js文件)

React项目中如何结合antd引入阿里图标(外联方式)_第5张图片

React项目中如何结合antd引入阿里图标(外联方式)_第6张图片

四:最后可使用在中可使用type属性以font-class的方式引用图标(支持多色图标,不受单色限制

效果如下:

你可能感兴趣的:(React,react.js,javascript,前端)