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

最新推荐文章于 2025-10-17 05:06:34 发布

原创最新推荐文章于 2025-10-17 05:06:34 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 同时被 2 个专栏收录

29 篇文章

订阅专栏

ant-design-pro

3 篇文章

订阅专栏

本文指导如何将AntDesignPro项目中的菜单图标从在线的iconfontUrl切换到本地使用，包括清空url、选择所需图标并转换驼峰命名法，以方便团队维护。

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",
            },