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

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引入路径删除

Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标相关推荐

Ant Design Pro 菜单自定义 icon
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持使用 ant.des ...
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
先上整体代码: const beforeSearchSubmit = (par) => {//par 就是你搜索表单输入的内容 }<ProTableheaderTitle="查询 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro模板_ant design pro 当中改变ant design 组件的样式和数据管理
ant design pro 简介官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
Ant design pro (九) 修改Title 图标等小功能
一. 关于界面菜单及整体颜色风格修改 1. 直接修改 config/defaultSettings.ts 内部直接修改 2. 辅助修改 Ant Design Pro预览界面在预览界面中选择设置好之后 ...
ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
ant design pro 菜单栏使用图标官网使用inconfont图标,推荐使用inconfont官网的线上地址查看地址:https://pro.ant.design/zh-CN/docs/n ...
Ant Design Pro 菜单icon图标修改或新增
由于Ant Design Pro菜单和以前不一样了,去官网查到的Icon图标无法直接使用名称了,那怎么办呢,办法总是比问题多的,进入官网的图标组件,找到你想要用的图标,进入开发模式图标 Icon - ...
React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
Ant Design Pro V5精讲（实践篇一）：自定义登录界面、主界面
用户需求登录界面改造成自己的主界面的logo及产品名称改造成自己的语言包去掉或者只留中英语言包登录界面改造进入pages/user/login目录找到index.tsx // 去掉语言包栏目 ...

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

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

1、加载在线图标

2、加载离线图标

解决方法：

Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标相关推荐

最新文章

热门文章