usehook - 前端码易

1、概述
2、字体图标
3、字体图标组件
4、总结

1、概述

自定义字体图标组件，在实践开发中，是一个高频需求。图标的使用无处不在，小到编辑器的功能按钮，大到 chrome 浏览器的任务栏，都有大量的图标需要处理。每个稍微大一点点的项目都必然需要一个图标组件。

预览

在使用时，我们可以控制图标具体类型、颜色、大小。在 React 哲学之封装思想的指导下，这些控制项为组件的差异项，需要通过 props 传入。封装好之后，使用方式大概如下：

code.ts

1<Icon color="red" size="small" type="skip" />
2<Icon color="#FFF" size="small" type="loading" />

当然，由于是字体图标，因此我们也可以如同设置字体那样，去设置图标的字体大小、颜色等。那么，字体图标组件，要如何实现呢？

2、字体图标

最初见到字体图标的应用，是在淘宝网站上。当时大家都还在使用雪碧图，而淘宝页面的图标居然可以像字体一样，随意的给它设置颜色大小等属性。到了现在，字体图标早已经不是什么黑科技了，它几乎被普及到了所有网站。

在 CSS3 中，有一个语法可以自定义字体 @font-face。如果字体库是由图标组成，那么我们就可以创建字体图标了。字体图标与文字具有相同的特性，我们可以把图标当成字体一样处理。例如修改它的font-size，color等。对应的css语法如下：

global.css

1@font-face {
2  font-family: 'custom name',   /* 自定义字体名字 */
3  src: url('./fonts/custom.eot')  /* 下载到本地的字体库 */
4}

通常情况下，字体库中，每一个图标都会对应一个唯一的标识码。现在我们要通过字体图标网站 iconfont.cn 收集一个自己项目中会涉及到的图标。然后组成一个图标库。

我们可以直接使用线上图标库，在 iconfont 的图标库界面，点击查看在线链接并生成代码即可。

iconfont.css

1@font-face {
2  font-family: 'iconfont';  /* Project id 3219669 */
3  src: url('//at.alicdn.com/t/font_3219669_n8051p8dggi.woff2?t=1646884122827') format('woff2'),
4       url('//at.alicdn.com/t/font_3219669_n8051p8dggi.woff?t=1646884122827') format('woff'),
5       url('//at.alicdn.com/t/font_3219669_n8051p8dggi.ttf?t=1646884122827') format('truetype');
6}

将这段代码贴到我们的css文件中，就已经自定义了一个 font-family 为iconfont的字体图标。我们也可以将字体图标库下载下来，把url中的路径都修改为对应的字体库文件就行。

可以看到，每一个图标除了有一个对应的名字之外，还有一个唯一的 unicode 码。&#x表示他们后面跟的是 16 进制数字。假设我们期望在 HTML 中放入一个代表图标的标签

index.html

<i class="icon-warn" />

那么，只要它对应的 CSS 这样写，就可以在页面上显示出字体库中的图标了

font.css

1.icon-warn {
2  font-family: "iconfont";
3  color: red;
4  font-size: 20px;
5}
6.icon-warn:before {
7  content: '\e6cc';
8}

content 的值是一个斜杠加上图标对应的十六进制数字。运行之后我们就能在页面中看到一个红色的 warn 图标。

对应的 scss 写法为：

font.scss

1/* 对应的scss写法为 */
2.icon-warn {
3  font-family: "iconfont";
4  color: red;
5  font-size: 20px;
6  &:before {
7    content: '\e6cc';
8  }
9}

3、字体图标组件

很显然图标组件的封装不会涉及到太过于复杂的 JS 逻辑处理，更多的是对外部状态 props 的判断与处理。基础元素可以指定一个 i 标签。图标通过 before/after 伪类中的 content 显示。实现方法我们将每一个图标都对应写一个 class，然后根据传入的 type 类型，修改对应的 class 即可。

例如：

icon.css

1.icon {
2  &-react::before {
3    content: '\e712';
4  }
5  &-ercode::before {
6    content: '\e600';
7  }
8}

JS 的逻辑的处理主要在于样式合并，例如判断有哪些 class 名应该存在。

先思考一下组件封装好后，我们会遇到哪些情况。

第一种情况：简单传入 type，得到对应的图标显示。

icon.tsx

<Icon type="close" />

第二种情况：组件本身需要设置一些样式，因此可能会有通过添加 class 的方式自定义 CSS 样式。

icon.tsx

<Icon className="close" type="close" />

第三种情况：直接修改图标的样式

code.ts

1<!--第一种可以直接传入对应的属性-->
2<Icon type="close" color="red" />
3
4<!--另外一种是利用jsx支持的style语法，传入css样式-->
5const style = {
6  color: 'red',
7  fontSize: '20px'
8}
9<Icon type="close" style={style} />

第四种情况：我们要考虑特殊的类型，例如 loading 图标需要一直旋转。例如 refresh 刷新图标，点击时才旋转，刷新完成就停止旋转。因此我们要专门针对这种情况做特殊处理。添加一个是否旋转的控制属性。

icon.tsx

1<!--通过对spin的修改，来控制图标是否旋转-->
2<Icon type="refresh" spin={true} />

其余的我们可能在实践中还会添加新的需求，到时候再根据需求做改进即可。

OK，带着这些基础知识和需求，我们开始动手来完成我们的第一个正式的 React 组件。

在 src 目录下，创建一个专门用来存放组件的文件夹：components。然后在 components 目录下创建 Icon 目录。并分别创建 index.tsx 与 index.scss。我们将字体图标下载下来，存放于Icon目录的fonts目录中。

最终的文件结构大致如下：

bash

1+ Icon
2  + fonts
3  - index.tsx
4  - style.scss

现在我们先来实现 index.tsx 中的代码编写。

首先引入必要的模块

index.tsx

1import clsx from 'clsx'
2import './index.scss'

然后定义相关的 TS 类型声明

index.tsx

10export type IconType = 'react' | 'ercode' | 'search' | 'warn' |
20  'warn2' | 'back' | 'setting' | 'html' | 'html2' | 'like' |
30  'home' | 'profile' | 'project' | 'css' | 'css2' | 'css3' | 'css4' | 'wxgzhao' |
40  'wxgzhao2' | 'hot' | 'js' | 'menu' | 'wxs' | 'arrow-right' | 'arrow-left' |
50  'arrow-up' | 'arrow-down' | 'webpack' | 'vue' | 'redux' | 'event' |
60  'antd' | 'loading' | 'fed'
70
80type IconProps = {
90  type: IconType,
10  spin?: boolean,
11  className?: string,
12  color?: string,
13  style?: Object,
14  [key: string]: any
15}

然后给 props 设定一个默认值

index.tsx

1const defaultProps: IconProps = {
2  type: 'loading',
3  spin: false
4}

创建函数组件，主要逻辑是根据外部传入的 props 整合最终的样式

index.tsx

10export default function Icon(props = defaultProps) {
20  const {type, className, spin, color, style, ...other} = props
30
40  const cls = clsx({
50    'icon': true,
60    'icon-spin': !!spin || type === 'loading',
70    [`icon-${type}`]: true
80  }, className)
90
10  const _style = {...style, color}
11
12  return (
13    <i className={cls} {...other} style={_style} />
14  )
15}

CSS 的样式

index.scss

100/* 图标库地址 */
200/* https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.11&manage_type=myprojects&projectId=3219669&keyword=&project_type=&page= */
300
400@font-face {
500  font-family: 'iconfont';  /* Project id 3219669 */
600  src: url('//at.alicdn.com/t/font_3219669_n8051p8dggi.woff2?t=1646884122827') format('woff2'),
700       url('//at.alicdn.com/t/font_3219669_n8051p8dggi.woff?t=1646884122827') format('woff'),
800       url('//at.alicdn.com/t/font_3219669_n8051p8dggi.ttf?t=1646884122827') format('truetype');
900}
100
110.icon {
120  font-family: 'iconfont';
130  font-size: 16px;
140  font-style: normal;
150  display: block;
160  -webkit-font-smoothing: antialiased;
170  -moz-osx-font-smoothing: grayscale;
180}
190.icon {
200  &-react::before {
210    content: '\e712';
220  }
230  &-ercode::before {
240    content: '\e600';
250  }
260  &-search::before {
270    content: '\e6ac';
280  }
290  &-warn::before {
300    content: '\e6cc';
310  }
320  &-warn2::before {
330    content: '\e66f';
340  }
350  &-back::before {
360    content: '\e60f';
370  }
380  &-setting::before {
390    content: '\e606';
400  }
410  &-html::before {
420    content: '\e6a0';
430  }
440  &-html2::before {
450    content: '\e632';
460  }
470  &-like::before {
480    content: '\e60a';
490  }
500  &-home::before {
510    content: '\e671';
520  }
530  &-profile::before {
540    content: '\e607';
550  }
560  &-project::before {
570    content: '\e714';
580  }
590  &-css::before {
600    content: '\e605';
610  }
620  &-css2::before {
630    content: '\ec3a';
640  }
650  &-css3::before {
660    content: '\e601';
670  }
680  &-css4::before {
690    content: '\e618';
700  }
710  &-wxgzhao::before {
720    content: '\e612';
730  }
740  &-wxgzhao2::before {
750    content: '\e705';
760  }
770  &-hot::before {
780    content: '\e7a5';
790  }
800  &-js::before {
810    content: '\e810';
820  }
830  &-menu::before {
840    content: '\e666';
850  }
860  &-wxs::before {
870    content: '\e608';
880  }
890  &-arrow-right::before {
900    content: '\e743';
910  }
920  &-arrow-left::before {
930    content: '\e744';
940  }
950  &-arrow-up::before {
960    content: '\e745';
970  }
980  &-arrow-down::before {
990    content: '\e7b2';
100  }
101  &-webpack::before {
102    content: '\e6ae';
103  }
104  &-vue::before {
105    content: '\e69a';
106  }
107  &-redux::before {
108    content: '\ec7d';
109  }
110  &-event::before {
111    content: '\e609';
112  }
113  &-antd::before {
114    content: '\eaa1';
115  }
116  &-fed::before {
117    content: '\e60b';
118  }
119}
120
121.icon-spin {
122  animation-name: rotate;
123  animation-duration: 1s;
124  animation-timing-function: linear;
125  animation-iteration-count: infinite;
126}
127
128@keyframes rotate {
129  from {
130    transform: rotate(0)
131  }
132
133  to {
134    transform: rotate(360deg)
135  }
136}

OK，一个简单且非常专业的 Icon 组件就这样完成啦。

4、总结

对于商用项目而言，特别是 C 端的商用项目，几乎图标都是自定义的。因此，图标组件的封装是一个非常基础且高频的需求。不过对于 UI 要求不高的 B 端项目或者个人项目而言，我们也可以使用一些现成的图标库，例如

这些图标库都提供了大量的图标，可以满足我们的需求。

7、条件判断

9、useState

专栏首页

到顶

专栏目录

Table of Contents

1、概述

2、字体图标

3、字体图标组件

4、总结