@alicloud/iconfont-helper
https://www.iconfont.cn 辅助，用于注入 iconfont 或 webfont 并返回对应的 font 名，是写组件的好帮手
使用 injectIconFont
定义 Icon 组件
你需要去 https://www.iconfont.cn/manage/index?manage_type=myprojects 新建或选择一个 iconfont 项目，它会有一个固定不变的 id 和跟当前内容有关的 hash，并且在它生成的 CSS 里有一份 Base64，都可以拿来，比如：
注意以下代码比较紧凑，实际写的时候，应该拆到 types、enum、util 以减小主题文件的复杂度。
import React, {
HTMLAttributes
} from 'react';
import styled from 'styled-components';
import {
IconBase,
injectIconFont
} from '@alicloud/iconfont-helper';
enum EIconType {
alibaba = 'e68a' // 这里仅做演示，所以只写一个，注意不用写 e 前边的斜杠
}
type TIconType = keyof typeof EIconType;
interface IPropsIcon extends HTMLAttributes<HTMLSpanElement> {
type: TIconType; // 这样可以约束传入的 type，在 TS 的帮助下不会传错
}
const PROJECT = '2373906';
const HASH = 'qpoep7hwn3';
// const BASE64 = 'data:application/x-font-woff2;charset=utf-8;base64,...';
const fontFamily = injectIconFont(PROJECT, HASH);
function getCode(props: IPropsIcon): string {
const code = EIconType[props.type];
return code ? `\\${code}` : '';
}
const ScIcon = styled(IconBase)<IPropsIcon>`
font-family: ${fontFamily} !important;
&:before {
content: '${props => getCode(props)}';
}
`;
export default function Icon(props: IPropsIcon): JSX.Element {
return <ScIcon {...props} />;
}
// export 类型是好习惯
export type {
TIconType as IconType,
IPropsIcon as IconProps
};使用 Icon 组件
import React from 'react';
import Icon from '...'; // 应用内部的或你把它发布成包
// 任何需要 Icon 的地方
// OK
<Icon type="alibaba" />
// TS 报错
<Icon type="ali88" />使用 WebFont 字体
WebFont 可以让你的页面展现一些设计师希望的「美妙」字体（尤其是中文字体）。
众所周知，中文字体包不像西方字体那样，它是很大的，不可能为了视觉上的美观而让浏览器加载全量的中文字体包。
iconfont 网站提供了 webfont 的功能，你可以根据设计师给的文案去上边「定制」你要的字体。
假设，设计师要展示这样的文案：
定义 WebFont 组件
你这么做：
import React from 'react';
import styled from 'styled-components';
import {
injectWebFont
} from '@alicloud/iconfont-helper';
const fontFamily = injectWebFont('kygag0sd8g');
// 如果有其他的样式要求，也可以在这里加，或者在它的容器上加也行
const ScMengziKongzi = styled.span`
font-family: ${fontFamily}, sans-serif;
`;
export default function MengziKongzi(): JSX.Element {
return <ScMengziKongzi>孔子曰：中午不睡，下午崩溃!孟子曰：孔子说的对!</ScMengziKongzi>;
}使用 WebFont 组件
import React from 'react';
import MengziKongzi from ':/rc/webfont/mengzi-kongzi'; // 一般在引用内部，没有意义发布成包
// 任何需要此组件的地方
<MengziKongzi />