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'/>

每天進步一點點