IconFont本地化

开发中遇到网站需要在专网下使用，需要将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'/>

每天进步一点点