React从ant-design图标库中动态加载图标

React从ant-design图标库中动态加载图标

代码如下

const lazyLoadIcon = (name) => {
    return <React.Suspense fallback={<></>}>
        {React.createElement(lazy(() => import('@ant-design/icons').then(module => {
            return { default: module[name] };
        })), {})}
    </React.Suspense>
}

上面这个函数接受antd的图标的名字name，然后动态加载对应的组件。在其他的组件当中，可以通过比如

const App = () => {
	return <>{lazyLoadIcon('ZoomInOutlined')}</>
}

等来使用对应的图标。
这样做的一个优点就是直接实现了从字符串到图标组件的对应，可以少写很多的import语句