@alicloud/iconfont-helper
@alicloud/iconfont-helper
npm i @alicloud/iconfont-helper
@alicloud/iconfont-helper

@alicloud/iconfont-helper

AlibabaCloud ConsoleBase - 阿里云控制台基座

by aliyun

1.4.1 (see all)License:MITTypeScript:Built-In
npm i @alicloud/iconfont-helper
Readme

@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,都可以拿来,比如:

Code Example

注意以下代码比较紧凑,实际写的时候,应该拆到 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 Example

定义 WebFont 组件

你这么做:

Copy Id

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 />
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate