开发中遇到网站需要在专网下使用,需要将IconFont本地化。在这里介绍一种个人觉得最简便的方法
我用的是umi, ant design框架
1.去官网,下载IconFont的JS
下载,在下载的文件中选择JS文件,复制到所在项目的config目录下
2.在项目中引用
umi框架在pages文件下面可以创建document.ejs文件,在document.ejs中引用iconfont的JS
<script src="/iconfont.js"></script>
3.创建图标组件,这里注意React和Ant Design的版本,Icon.createFromIconfontCN这个方法需要在一定版本下使用,具体信息可查看Ant Design官网
import { Icon } from 'antd'; const IconFont = Icon.createFromIconfontCN({ // 线上 // scriptUrl: '//at.alicdn.com/t/font_1539921_oyuifh2qujq.js', // 本地 scriptUrl: 'iconfont.js', }); export default function(props) { return <IconFont {...props} />; }
4.在需要使用的地方,引入并使用该组件
import { IconFont } from '@/components';
<IconFont type='iconruanjianxiazai'/>
每天进步一点点