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

每天进步一点点

猜你喜欢

转载自www.cnblogs.com/abigting/p/12761848.html
今日推荐