React antd iconfont组件

前言

使用antd框架的iconfont，并将其组件化，以及遇到的一些问题。

解决方案

1.iconfont组件化，自行去掉一些无关紧要的东西

import {
    createFromIconfontCN
} from '@ant-design/icons';
import PropTypes from 'prop-types';
import {iconFontUrl} from '../../../../Config'
import {loadLocalGallery} from "../../../../Config";
import icon from '../../../../../public/iconfont'

/**
 * 图标组件
 * 2020-7-6
 */
const IconFont = createFromIconfontCN({
    scriptUrl: loadLocalGallery ?
        icon
        :
        iconFontUrl
});

IconFont.propTypes = {
    //图标
    type: PropTypes.string.isRequired,
    //样式
    style: PropTypes.Object,
    //提示
    title: PropTypes.any,
    //样式类名
    className: PropTypes.any,
    //点击事件
    onClick: PropTypes.function,
};

export default IconFont;

2.上列代码注意一下，我本地化时，我只直接导入import icon from '../../../../../public/iconfont'的，这里是我遇到的一个坑。官方网站推荐的本地化是 scriptUrl: 'iconfont.js',其中iconfont.js是放在public下的，我这里也是放在public下的，但是有些情况二次刷新网页会不加载并且报错所以我这里直接import导入，没遇到这个问题可以不用管按照官网方式写

const IconFont = createFromIconfontCN({
    scriptUrl: loadLocalGallery ?
        'iconfont.js'
        :
        iconFontUrl
});

3.iconfont.js怎么来的，这里懒人写法：

image.png

直接本地建一个iconfont.js

image.png
官网上复制链接到浏览器，直接复制所有代码到js中,ok运行。

4.因为是引用src外文件所以需要单独配置，这里直接开另一篇文章：https://www.jianshu.com/p/e606793c0ad5