技術標籤：ant-design-pro

之前做動態選單的時候沒有注意到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;
  }
}
 

結果如下圖