@kcuf/rc-icon-base

https://www.iconfont.cn 辅助，用于注入 iconfont 或 webfont 并返回对应的 font 名，是写组件的好帮手，同时提供了 IconBase 以助理快速写组件。

使用 injectIconFont

定义 Icon 组件

你需要去 https://www.iconfont.cn 新建或选择一个 iconfont 项目，它会有一个固定不变的 id 和跟当前内容有关的 hash，并且可能有 Base64，都可以拿来，比如：

定义组件（参考 @kcuf/rc-icon 的实现，核心代码 50 行左右）：

import {
  ReactElement
} from 'react';
import styled from 'styled-components';

import IconBase, {
  IconProps,
  injectIconFont
} from '@kcuf/rc-icon-base';

// 为 demo 完整，直接写这里，实际场景建议提出去
const ICON_TYPE_MAPPING = {
  loading: 'e62e',
  close: 'e612'
};

type TIconType = keyof typeof ICON_TYPE_MAPPING;

interface IIconProps extends IconProps<TIconType> {}

// https://at.alicdn.com/t/c/font_4720928_yvtln3fv7v.css
const fontFamily = injectIconFont('4720928', 'yvtln3fv7v', { // 每次更新只需更新文件中的 hash 值
  pathExtra: '/c'
});

function getIconCode(type: TIconType) {
  return `\\${ICON_TYPE_MAPPING[type] || 'e600'}`;
}

function getIconColor(type: TIconType): string | null {
  ...
}

/**
 * ConsoleBase 项目自用的图标组件
 */
export default function Icon({
  type,
  ...props
}: IIconProps): ReactElement {
  return <IconBase<TIconType> {...{
    type,
    rotating: type === 'loading',
    ...props,
    fontFamily,
    getIconCode,
    getIconColor
  }} />;
}

export type {
  TIconType as IconType,
  IIconProps as IconProps
};

使用 Icon 组件

import Icon from '...'; // 应用内部的或你把它发布成包

// OK
<Icon type="loading" />
<Icon type="close" />
// TS 报错
<Icon type="load" />
<Icon type="x" />

使用 WebFont 字体

WebFont 可以让你的页面展现一些设计师希望的「美妙」字体（尤其是中文字体）。

众所周知，中文字体包不像西方字体那样，它是很大的，不可能为了视觉上的美观而让浏览器加载全量的中文字体包。

iconfont 网站提供了 webfont 的功能，你可以根据设计师给的文案去上边「定制」你要的字体。

假设，设计师要展示这样的文案：

定义 WebFont 组件

你这么做：

import {
  ReactElement
} from 'react';
import styled from 'styled-components';

import {
  injectWebFont
} from '@kcuf/rc-icon-base';

const fontFamily = injectWebFont('kygag0sd8g');

// 如果有其他的样式要求，也可以在这里加，或者在它的容器上加也行
const ScMengziKongzi = styled.span`
  font-family: ${fontFamily}, sans-serif;
`;

export default function MengziKongzi(): ReactElement {
  return <ScMengziKongzi>孔子曰：中午不睡，下午崩溃！孟子曰：孔子说的对！</ScMengziKongzi>;
}

使用 WebFont 组件

import React from 'react';

import MengziKongzi from 'path/to/mengzi-kongzi'; // 一般在引用内部，没有意义发布成包

// 任何需要此组件的地方
<MengziKongzi />