React AntD 中 Icon 组件使用 iconfont.cn

WHY

项目基于 React + AntD 搭建，但如何让 Icon组件加入更多的图标？

发现 AntD 相关官方文档已为我们提供了方案：Icon 组件 使用 iconfont.cn

那如何具体使用呢？

WHAT

iconfont.cn —— 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

HOW

组件中使用 Icon

jsx 代码参考如下：

import React from 'react';

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

import "./icons.less"

const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1919264_4ssswcyqimr.js',
});

export function Icons() {
    return <div className="custom-icons-list">
        <IconFont type="icon-shouye" />
    </div>
}

//at.alicdn.com/t/font_1919264_4ssswcyqimr.js 为我的项目生成的 font.js 的 alicdn 访问地址（iconfont.cn 提供的功能）

参考官方文档的 Sandbox

扩展 & 优化

可考虑加入自己的图标；若多人使用，可加入流程化管理图标及项目等。

若需要使用 iconfont.cn 的多个资源（其实也就是引入多个 js），可参考 使用 iconfont.cn 的多个资源