v4 中来自字符串的 Antd 图标类型

Question

我必须将 antd 从 v3 升级到 v4，以前我们用来显示一些来自作为 prop 传递的字符串的图标，如下所示：

 <Icon type={props.icon} />

有没有办法使用新的 Icon 系统在 antd v4 中实现这样的目标？我知道存在 '@ant-design/compatible' 但迁移是为了减少包大小，所以我想避免这个解决方案。

编辑：我只是改变了我使用图标的方式，在我的配置文件中，我导入了图标并将它们传递给我的生成器，就像这样：icon = {props.icon}而不是之前的<Icon type={props.icon} />.

Answer 1

我正在使用 @loadable/component 并创建了一个传递类型的动态组件

文件 DynamicIcon.js：

import loadable from "@loadable/component";

const DynamicIcon = loadable(props => 
import(`@ant-design/icons/es/icons/${props.type}.js`)
.catch(err => import(`@ant-design/icons/es/icons/WarningOutlined.js`)))

export default DynamicIcon;

并像 v3 之前一样调用图标：

<DynamicIcon type={'TagOutlined'} />

Answer 2

这似乎有效

const Icon = ({type, ...rest}) => {
  const icons = require(`@ant-design/icons`);
  const Component = icons[type];
  return <Component {...rest}/>
}