在React中使用FontAwesome5

来自菜鸟教程
跳转至：导航、​搜索

在本系列的第一部分中，我们演示了 reactstrap 以快速高效地创建简单的表单。 在本期中，我们将使用 Font Awesome 5 添加一些 SVG 图标，让我们的表单更具吸引力。

注意： Font Awesome 5.1 迎来了巨大的改进，其中包括对代码库的完全重写。 如果您使用的是版本 4，请按照他们的 升级步骤 以确保一致性。


该系列

什么是新的？

FA 通过重写他们的整个代码库并为用户提供新的和令人耳目一新的功能，全力以赴地推出第 5 版。

V5 添加了各种各样的图标（超过 1000 个！），甚至包括旅行、表情符号😍和精美 SVG 格式设计的类别包。

如果您过去使用过 Font Awesome，那么 'fa-profile' 之类的内容可能看起来很熟悉。 在 V5 FA 中引入了图标样式，例如 'fas' 用于 Font Awesome solid，'fal' 用于 Font Awesome Light，'fab' 用于 Font Awesome Brands，最后'far' 用于 Font Awesome Regular，因此新图标可能看起来更像 'far fa-profile'。 这为 UI/UX 设计增加了很大的灵活性。

此外，还有用于 React、Angular、Vue 和 Ember 的 FA 包（就像我们即将使用的那个！） .

为了资助这一快速而稳健的开发，FA 推出了 Font Awesome Pro，它为用户提供了额外的设计灵活性和功能。 如果您喜欢 V4 中的免费功能，请不要担心！ V4 中的所有功能都保留在免费计划中，并进行了错误修复和更新。

查看他们的 更新页面 以获得完整的独家新闻。

安装

让我们从第一部分离开的地方继续。 我们冒昧地添加了一些 CSS 以获得 🐊.io 的感觉。

首先，我们将安装 react-fontawesome 以及 SVG 库 fontawesome-svg-core 和 fontawesome-svg-icons。 我们正在安装的软件包仅包含免费版本。 如果您希望使用新的专业图标和样式，请查看他们的 Github 存储库 以获取更多安装和配置说明。

以下是通过 npm 或 Yarn 安装所需内容的方法： 

$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

# or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

执行

既然我们在安装上已经很成功了，我们将直接进入并实施这些坏男孩。

有多种使用 FA 图标的方法，但我们将专注于构建一个库，以便轻松访问整个应用程序中的所有图标。


在我们的 App.js 文件中，我们将导入我们需要的图标。

在本例中，我们将使用信封和钥匙图标。 所有图标都可以在 Font Awesome 的 图标库 中找到。 所有图标导入都转换为camelCase，开始时带有fa，省略所有破折号。 例如，钥匙图标将被导入为 faKey。 我们将首先导入所需的文件并调用 fontawesome-svg-core 的 'library.add 来拉取我们的图标。

应用程序.js 

import { library } from '@fortawesome/fontawesome-svg-core';
import { faEnvelope, faKey } from '@fortawesome/free-solid-svg-icons';

library.add(faEnvelope, faKey);

// ...

随着我们项目的发展，我们只需要在 App.js 中导入和添加图标到我们的库中。 想象一下，我们有一个名为 SignUp.js 的组件，我们需要在其中使用这些图标。 由于它们已经被添加到 App.js 的库中，我们只需在下面添加 ** 组件的导入。

注册.js 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

/// ...

接下来，作为用户名标签的一部分，我们将使用 FontAwesomeIcon 组件。

注册.js 

// ...

<Label>
  <FontAwesomeIcon
    icon="envelope"
  />
  Username
</Label>

请注意，提供的图标名称与导入时的名称不同。 当将图标名称作为道具传递给 FontAwesomeIcon 组件时，我们只需要 图标的小写字母 名称。 对于其他样式，我还添加了 className。 现在只需冲洗并重复 key 图标。 结果应如下所示：

我们的图标和文本有点挤压，我敢说，很无聊，所以让我们在图标和标签文本之间添加一个空格并更改图标的颜色和大小：

注册.js 

// ...

<label>
  <FontAwesomeIcon
    icon="envelope"
    color="#6DB65B"
    size="sm"
  />
  {' '}Username
</label>

如您所见，FontAwesomeIcon 组件可以使用几个不同的道具来改变图标样式。 这里我们使用了 color 和 size 道具。 size 属性需要一个字符串值，如 xs、lg、2x、3x……有很多更多可以传入的道具。 值得注意的是，spin 和 pulse 布尔属性将使图标自行旋转。

仅此而已！ 看看那个可爱的用户界面。


TLDR

reactstrap + react-fontawesome = 一个快乐的开发者🚀

取自“https://cainiaojiaocheng.com/index.php?title=在React中使用FontAwesome5&oldid=26351”
Powered by MediaWiki