Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标

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

1、加载在线图标
  • 创建一个项目(图标的前缀一定要设置为:icon-
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第1张图片
  • 创建远程连接
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第2张图片
  • 复制代码,找到ant design pro项目中的src下的defaultSettings.js,设置iconfontUrl的路径
    在这里插入图片描述
  • 在路由配置上使用使用就可以了
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第3张图片
2、加载离线图标
  • 加载离线的图标,需要把iconfont上编辑好的图标下载,并且把文件放在项目适合的文件夹下。小编放在src/assets
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第4张图片
  • 找到ant design pro项目中的src下的defaultSettings.js,设置iconfontUrl的路径,这是就需要使用require导入文件,直接配置路径,会无效的。
    在这里插入图片描述
  • 最后像在线加载那样使用。

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

解决方法:

  • 上面使用的是require引入本地文件,要换成使用imort引入本地文件
  • src/components目录下,找到IconFont文件夹
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第5张图片
    修改IconFont里面的index文件,如图:
    Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标_第6张图片

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

你可能感兴趣的:(ant,design,pro)