600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Ant Design Pro 使用自定义iconfont图标 改变导航栏的图标

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

时间:2019-12-13 01:00:25

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。