react: 动态设置ant-design/icons图标

antd 版本：V4

@ant-design/icons 版本： V4

在此版本中，icon的图标模式为标签形式，不像element那样可以通过改变class而改变icon的图标样式。

在我使用umijs开发后端管理系统时候，需要用到动态的icon图标，系统配置的时候只会传递icon的标签名称，比如正常的图标标签为：<PlusCircleFilled />，系统存的是PlusCircleFilled string类型，我需要在页面上显示对应的图标。

1.创建一个icon.ts文件，内容如下：

import React from 'react'
import * as icons from '@ant-design/icons'

const Icon = (props: { icon: string }) => {
    const { icon } = props;
    const antIcon: { [key: string]: any } = icons;
    return React.createElement(antIcon[icon]);
};

export default Icon

2.使用

import Icon from './icon'

<Icon icon={item.icon}/> // item.icon为动态传入的标签名称