前言
在前端开发中，我们经常需要使用各种图标图形来增强页面交互或者美观度。而使用字体图标可以很好地解决这一问题。React-zwicon 就是一个基于 React 的字体图标库，它集成了近 300 种常用的字体图标，可以很容易地在 React 项目中使用，本篇文章就是一篇 react-zwicon 包使用教程。
准备工作
使用 react-zwicon 前，需要先创建一个基于 React 的项目并安装该包，如果还不会创建，可以参考官方文档。
第一步，使用 npm 安装 react-zwicon 包：
npm install react-zwicon --save
第二步，添加一个字体文件。react-zwicon 不包含字体文件，需要手动添加。可以从 Github 上下载 zwicon.woff 文件，然后添加到 public/fonts 目录下面。
第三步，添加 css 样式。可以从 Github 上下载 index.css 文件，并在项目中引入，在 public/index.html 中添加以下代码：
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/index.css">
使用 react-zwicon
在完成上述准备工作之后，便可以开始使用 react-zwicon 的字体图标了。主要有两种方式：通过组件使用和直接使用 CSS 类。
组件使用
react-zwicon 包提供了 <Icon> 组件，可以用来显示字体图标。
在使用前，需要先在组件中引入 react-zwicon 包，然后可以在组件中使用 <Icon> 组件，以显示若干个不同的图标。
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------------
-------- ----- -
------ -
-----
----- ------------ --
------
--
-
------ ------- ----在上面的例子中，我们使用了 <Icon> 组件，并且传入了 name 属性，该属性指定了需要显示的字体图标名称，这种方式可以很容易地显示出 react-zwicon 提供的所有图标。
直接使用 CSS 类
除了使用 <Icon> 组件，还可以通过直接使用 CSS 类来显示字体图标，在需要显示图标的元素上添加 CSS 类 .zwicon，然后设置该元素的 ::before 伪元素的 content 为需要显示的字体图标，例如：
<div class="zwicon">zdai-full</div>
API 文档
组件属性
组件 <Icon> 接收以下属性：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 设置图标名称 | string | - |
| className | 设置样式名 | string | - |
| style | 设置样式对象 | object | - |
示例代码
完整代码可以在 Github 上找到，以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------------
-------- ----- -
------ -
-----
----- ------------ --
-------
----- ----------- --------------------- --
----------
----
---------
----- -------------- ------------------------ --
-----
---
----- ----- ----- --- ---- ------------ ----------- ----- ---------
-------- -------------- ------- ---- --- --- -------- ----- ------------ --
----
------
--
-
------ ------- ----总结
通过本文的介绍，读者应该已经学会了如何在 React 项目中使用 react-zwicon 的字体图标，包括通过组件使用和直接使用 CSS 类。在实际项目中可以根据需求和个人喜好选择合适的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c0a