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
语句