antd-pro(V5)动态菜单之动态icon

之前做动态菜单的时候没有注意到Icon的问题，以为简单的加个参数即可，后面发现生成的是文本。
在网上找了些资料，或者要引入全部的icons，或者写乱七八糟的方法，但是结合实际项目，这两种都不是我想要的。
实际上项目开发中的菜单icon应该是设计师给的矢量图，上传到iconfont上生成字体图标，然后在项目里使用。antd-pro里使用iconfont不难，主要步骤如下：
1.在iconfont上挑选或者上传图标，下载到项目中
2.在global.less引入字体图标
3.app.tsx页面menuDataRender方法新增自定义组件

const menuDataRender = () => {
 ...
  const data = JSON.parse(str);
  data.forEach((item: MenuDataItem) => {
    const obj = item;
    obj.icon = <MyIcon path={typeof item.path === 'string' ? item.path : ''} />;
    spliceBtn(item);
  });
  return data;
};


const MyIcon = (item: MenuDataItem) => {
  return (
    <span className="anticon font0">
      <span className={`iconfont  icon-${item.path}`}></span>
    </span>
  );
};

.anticon.font0 {
  font-size: 0;
  .iconfont {
    line-height: 19px;
  }
}

结果如下图