字体图标使用

本节目标：理解“字体图标使用”的核心思路，并能把它用于实际开发或面试表达。

import {  Icon } from 'antd';
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1850507_vweltrt6qrg.js'
})

const genExtraIcon = () => (
    <IconFont
        type="icon-liangdu"
        rotate={90}
        onClick={event => {
            event.stopPropagation();
            setState({ ...state, theme: !state.theme });
            // console.log(state.theme);
            // console.log("genExtraIcon");
        }}
    />
);

如果图标未显示出来，有可能是样式问题，IconFont内啊的svg图片默认样式为1em，即父元素的fontsize的大小，因此可以设置一下样式，就可能显示出来了。

<IconFont
    type="ico-maintenanceDel"
    style={{ fontSize: 16 }}
    onClick={(e) => {
        e.stopPropagation();
        handleFileManagerDelete(uId);
    }}
/>

渲染结果

<i style="font-size: 16px;" tabindex="-1" class="anticon">
    <svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
        <use xlink:href="#ico-maintenanceDel"></use>
    </svg>
</i>