之前做动态菜单的时候没有注意到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;
}
}
结果如下图