如何在React中使用FontAwesome5

介绍

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

先决条件

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

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
创建React App，你可以按照如何设置React项目来完成。

第 1 步 - 使用 Font Awesome

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

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

src/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']} />;

我们必须将 icon 属性切换为数组而不是简单的字符串。

第 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 库。

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

src/fontawesome.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：

src/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 中的所有品牌图标。您将使用以下内容导入整个包：

src/fontawesome.js

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

library.add(fab);

fab 代表整个品牌图标包。

单独导入图标

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

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

src/fontawesome.js

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
);

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

如果您想要 fal、far 和 fas 包的所有类型的 boxing-glove，可以将它们全部导入为不同的名称，然后添加他们。

src/fontawesome.js

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 还有一个 power transforms 功能，您可以将不同的变换串在一起：

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

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

固定宽度图标

当在需要相同宽度和统一的位置使用图标时，Font Awesome 让我们使用 fixedWidth 属性。例如，假设您的导航下拉菜单需要固定宽度：

<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 允许您结合两个图标来制作带有 masking 的效果。你定义你的普通图标，然后使用 mask 属性定义第二个图标放在上面。第一个图标将被限制在屏蔽图标内。

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

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

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

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

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

如果您的整个站点不是单页应用程序 (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 的方法。

如何在React中使用FontAwesome5

介绍

先决条件

第 1 步 - 使用 Font Awesome

第 2 步 — 选择图标

确定图标属于哪个包

使用特定包中的图标

第 3 步 — 安装 Font Awesome

第 4 步 — 创建图标库

导入整个图标包

单独导入图标

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

第 5 步 — 使用图标

固定宽度图标

旋转图标

高级：屏蔽图标

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

结论

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