antd 4.x icon动态获取

const menuList = [
  {
    title: '首页', // 菜单标题名称
    key: '/home', // 对应的path
    icon: 'HomeOutlined', // 图标名称
    isPublic: true, // 公开的
  },
  {
    title: '商品',
    key: '/products',
    icon: 'AppstoreOutlined',
    children: [ // 子菜单列表
      {
        title: '品类管理',
        key: '/category',
        icon: 'BarsOutlined'
      },
      {
        title: '商品管理',
        key: '/product',
        icon: 'ToolOutlined'
      },
    ]
    .......

import * as Icon from '@ant-design/icons'
import {Link} from 'react-router-dom'

getMenuNodes=(menuList)=>{
        return menuList.map(item=>{
            const icon = React.createElement(
                Icon[item.icon],
                {
                  style:{ fontSize: '16px'}
                }
              )
            if(!item.children){
                return (
                <Menu.Item key={item.key} icon={icon}>
                    <Link to={item.key}>{item.title}</Link>
                </Menu.Item> 
                )
            }
            return (
                <SubMenu key={item.key} title={item.title} icon={icon}>
                    {this.getMenuNodes(item.children)}
                </SubMenu>
            )
        });

    }

讨下关于icon 使用的其他一些想法、

关于使用非antd官网的icon使用方法一：创建组件，然后直接引用

import React from 'react'

export default function IconTest() {
    return (
        <span role="img" aria-label="pic-right" className="anticon anticon-pic-right">
            <svg viewBox="64 64 896 896" focusable="false" data-icon="pic-right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                <path d="M952 792H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-632H72c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h880c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-24 500c8.8 0 16-7.2 16-16V380c0-8.8-7.2-16-16-16H416c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h512zM472 436h400v152H472V436zM80 646c0 4.4 3.6 8 8 8h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56zm8-204h224c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"></path>
            </svg>
        </span>
    )
}

方法二：在官方文档中有在iconfont.cn里生成js,然后引用, 翻看了生成的sj文件，可以提换里面的svg及symbol 对象的id(icon key) 来做自己的js 然后引用

附：
iconfont官网 https://www.iconfont.cn
antd官网：https://ant.design/components
bootstrap icons 官网https://icons.bootcss.com