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