Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标_ant design pro react 更改侧边导航icon

Ant Design Pro 使用iconfont上的图标有两种方法:

1、加载在线图标

• 创建一个项目（图标的前缀一定要设置为：icon-）
  
• 创建远程连接
  
• 复制代码，找到ant design pro项目中的src下的defaultSettings.js，设置iconfontUrl的路径
  
• 在路由配置上使用使用就可以了
  

2、加载离线图标

• 加载离线的图标，需要把iconfont上编辑好的图标下载，并且把文件放在项目适合的文件夹下。小编放在src/assets中
  
• 找到ant design pro项目中的src下的defaultSettings.js，设置iconfontUrl的路径，这是就需要使用require导入文件，直接配置路径，会无效的。
  
• 最后像在线加载那样使用。

上面离线加载重新运行项目的时候可能会报错，提示找不到资源文件。

解决方法：

• 上面使用的是require引入本地文件，要换成使用imort引入本地文件
• 在src/components目录下，找到IconFont文件夹
  
  修改IconFont里面的index文件，如图：
  

重新运行项目就不会报错了。记得把之前require引入路径删除