介绍

Font Awesome是一个提供图标和社交标志的网站工具包。React是一个用于创建用户界面的编码库。虽然 Font Awesome 团队制作了一个React 组件来促进集成，但仍有一些基础知识需要了解 Font Awesome 5 及其结构。在本教程中，您将探索如何使用 React Font Awesome 组件。

先决条件

本教程不需要编码，但如果您有兴趣尝试一些示例，您将需要以下内容：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 创建 React App，您可以按照如何设置 React 项目来完成。

第 1 步 – 使用 Font Awesome

Font Awesome 团队创建了一个React 组件，因此您可以将两者结合使用。使用此库，您可以在选择图标后按照教程进行操作。

在本例中，我们将使用home图标并执行App.js文件中的所有操作：

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

您的应用程序现在有一个小主页图标。你会注意到这段代码只选择了home图标，所以只有一个图标被添加到我们的包大小中。

现在，Font Awesome 将确保在安装此组件后，此组件将替换为该图标的 SVG 版本。

步骤 2 — 选择图标

在安装和使用图标之前，了解 Font Awesome 库的结构非常重要。由于有很多图标，团队决定将它们拆分成多个包。

在挑选和选择您想要的图标时，建议访问Font Awesome 图标页面来探索您的选项。您将在页面左侧看到不同的过滤器可供选择。这些过滤器非常重要，因为它们将指示从哪个包导入您的图标。

在上面的例子中，我们从包中home取出图标@fortawesome/free-solid-svg-icons。

确定图标属于哪个包

您可以通过查看左侧的过滤器来确定图标属于哪个包。您还可以单击图标并查看它所属的包。

一旦您知道字体属于哪个包，请务必记住该包的三个字母的速记：

• 纯色风格 – fas
• 常规风格 – far
• 浅色风格 – fal
• 双色调风格 – fad

您可以从图标页面搜索特定类型：

使用特定包中的图标

如果您浏览Font Awesome 图标页面，您会注意到通常有同一个图标的多个版本。例如，让我们看一下boxing-glove图标：

为了使用特定的图标，您需要调整<FontAwesomeIcon>。以下是来自不同包的多种类型的相同图标。这些包括前面讨论过的三个字母的速记。

注意：在我们分几个部分构建一个图标库之前，以下示例将不起作用。

以下是固体版本的示例：

<FontAwesomeIcon icon={['fas', 'code']} />

如果未指定类型，则默认为固体版本：

<FontAwesomeIcon icon={faCode} />

轻量版使用fal：

<FontAwesomeIcon icon={['fal', 'code']} />;

我们不得不将我们的iconprop切换为一个数组而不是一个简单的字符串。

第 3 步 – 安装 Font Awesome

由于一个图标有多个版本、多个包和免费/专业包，安装它们都涉及多个npm包。您可能需要安装多个，然后选择您想要的图标。

对于本文，我们将安装所有内容，以便演示如何安装多个软件包。

运行以下命令来安装基础包：

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

运行以下命令安装常规图标：

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

这些将安装实心图标：

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

对灯图标使用此命令：

# light icons
npm i -S @fortawesome/pro-light-svg-icons

这将安装双色调图标：

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

最后，这将安装品牌图标：

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

或者，如果您更喜欢一次性安装它们，您可以使用此命令来安装免费图标集：

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

如果您拥有 Font Awesome 的专业帐户，则可以使用以下命令安装所有图标：

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

您已经安装了这些软件包，但尚未在您的应用程序中使用它们或将它们添加到我们的应用程序包中。让我们看看在下一步中如何做到这一点。

第 4 步 – 创建图标库

将您想要的图标导入多个文件可能很乏味。假设您在多个地方使用了 Twitter 徽标，您不想多次编写。

为了在一个地方导入所有内容，我们将创建一个Font Awesome 库，而不是将每个图标导入到每个单独的文件中。

让我们fontawesome.js在src文件夹中创建，然后将其导入index.js. 只要您要使用图标的组件可以访问（是子组件），就可以随意添加此文件。你甚至可以在你的index.jsor 中正确地做到这一点App.js。但是，最好将其移到单独的文件中，因为它可能会变大：

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

如果您在自己的文件中执行此操作，则需要导入到index.js：

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

导入整个图标包

不建议导入整个包，因为您将每个图标都导入到您的应用程序中，这可能会导致包过大。如果您确实需要重要的整个包，您当然可以。

在此示例中，假设您想要@fortawesome/free-brands-svg-icons. 您将使用以下内容导入整个包：

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab 代表整个品牌图标包。

单独导入图标

推荐的使用 Font Awesome 图标的方法是将它们一个一个地导入，以便最终的包大小尽可能小，因为您将只导入您需要的内容。

您可以从来自不同包的多个图标创建一个库，如下所示：

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

从多个样式导入相同的图标

如果你希望所有类型boxing-glove的fal，far和fas包，你可以导入它们都作为一个不同的名称，然后将它们添加。

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

然后，您可以通过实现不同的前缀来使用它们：

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

步骤 5 — 使用图标

现在你已经安装了你需要的东西并将你的图标添加到你的 Font Awesome 库中，你已经准备好使用它们并分配大小了。在本教程中，我们将使用 light ( fal) 包。

第一个示例将使用正常大小：

<FontAwesomeIcon icon={['fal', 'code']} />

第二个示例可以使用命名 sizing，它使用小 ( sm)、中 ( md)、大 ( lg) 和特大( ) 的缩写xl：

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

第三个选项是使用编号的大小，可以达到6：

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

使用编号尺寸时，您还可以使用小数来找到完美的尺寸：

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome 通过采用 CSS 的文本颜色来设计它使用的 SVG 样式。如果您要<p>在该图标所在的位置放置一个标签，则段落的颜色将是图标的颜色：

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome 还具有强大的转换功能，您可以将不同的转换串在一起：

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

您可以使用在 Font Awesome 站点上找到的任何转换。您可以使用它来向上、向下、向左或向右移动图标，以获得完美的文本旁边或按钮内部的定位。

固定宽度图标

当在一个地方使用图标时，它们都需要相同的宽度和统一，Font Awesome 允许我们使用fixedWidthprop。例如，假设您的导航下拉菜单需要固定宽度：

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

旋转图标

当表单正在处理时，旋转对于在表单按钮上实现很有用。您可以使用微调图标来制作漂亮的加载效果：

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

你可以spin在任何东西上使用道具！

<FontAwesomeIcon icon={['fal', 'code']} spin />

高级：屏蔽图标

Font Awesome 允许您组合两个图标来制作带有遮罩的效果。你定义你的普通图标，然后使用mask道具定义第二个图标放在上面。第一个图标将被限制在遮罩图标内。

在本例中，我们使用掩码创建了标签过滤器：

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

请注意如何将多个transform道具链接在一起以移动内部图标以适应遮罩图标。

我们甚至使用 Font Awesome 对背景徽标进行了着色和更改：

第 6 步——react-fontawesome在 React 之外使用和图标

如果您的整个站点不是单页应用程序 (SPA)，而是拥有一个传统站点并在顶部添加了 React。为了避免导入主要的 SVG/JS 库和react-fontawesome库，Font Awesome 创建了一种使用 React 库来监视 React 组件之外的图标的方法。

如果您有任何<i class="fas fa-stroopwafel"></i>，我们可以告诉 Font Awesome 使用以下内容监视和更新它们：

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver是一种网络技术，它允许我们高效地观察 DOM 的变化。在React Font Awesome 文档上了解有关此技术的更多信息。

结论

一起使用 Font Awesome 和 React 是一个很好的组合，但需要使用多个包并考虑不同的组合。在本教程中，您探索了一些可以结合使用 Font Awesome 和 React 的方法。