ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地

ant design pro 菜单栏使用图标

官网使用inconfont图标，推荐使用inconfont官网的线上地址
查看地址：https://pro.ant.design/zh-CN/docs/new-page/

我的项目是在config.ts 中的iconfontUrl

export default {
  navTheme: "dark", // 菜单的主题
  primaryColor: "daybreak", // Ant Design 的主色调
  layout: "sidemenu", // 菜单的布局
  contentWidth: "Fluid", // 内容的布局 Fixed 为定宽到1200px
  fixedHeader: true, // 固定页头
  autoHideHeader: false, // 下滑时自动隐藏页头
  fixSiderbar: true, // 固定菜单
  menu: {
    locale: true
  },
  title: `${ProjectTtile}`,
  pwa: false,
  iconfontUrl: "//at.alicdn.com/t/font_1716924_7j5cze0fcd8.js"
} as DefaultSettings;

路由页面可以这样写，必须以 icon-开头才可以

问题

因为线上地址，员工维护不方便，公司要求引入本地使用。查了很多资料，菜单的图标都没有直接解决方法，组件使用还好一点。

解决方案

1.先把iconfontUrl 置空

2.登录antd官网看一直自己需要的图标
地址：https://ant-design.gitee.io/components/icon-cn/
复制代码
<BarChartOutlined />

3.改造使用
<BarChartOutlined />去除Outlined 变成BarChart 使用驼峰命名法barChart
这样就可以在ant design pro 路由中直接使用

        {
              name: "dataintegration",
              icon: "barChart",
              path: `/${ProtalPath}/dataintegration`,
              component: "../layouts/BlankLayout.tsx",
            },