在 React 中使用 Font Awesome 5

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

注意:字体 Awesome 5.1 欢迎大量的改进,其中包括对代码库的完整重写。如果您正在使用版本 4,请遵循他们的 升级步骤以确保一致性。

系列

什么是新?

通过重新编写整个代码库,并为用户提供新的和刷新功能,FA在版本5中完成了这一切。

V5添加了各种各样的图标(超过1000个!)甚至包括旅行,情感片和设计的类别包在一个精彩的SVG格式。

如果你在过去曾使用过Awesome字体,那么类似fa-profile的东西可能看起来很熟悉。在V5 FA中,我们引入了fas为Awesome字体固体,fal为Awesome Light字体,fab为Awesome字体品牌,最后是far为Awesome Regular字体,所以新的图标可能看起来更像far fa-profile

此外,还有FA包(就像我们即将使用的那种!)用于 React, Angular, VueEmber

为了资助这一快速而强大的发展,FA推出了 Font Awesome Pro,它为用户提供了额外的设计灵活性和功能性. 如果您是V4中的免费功能的粉丝,不要担心!V4中的所有功能仍然在免费计划中,有错误修复和更新。

觀看他們的全方位,看他們的全方位。

安装

让我们从我们在第一部分停留的地方拿起,我们采取了添加一些CSS的自由,以获得一个.io感觉。

要开始,我们将安装react-fontawesome和SVG库fontawesome-svg-corefontawesome-svg-icons。我们正在安装的软件包只包含免费版本。

以下是如何通过 npm 或 Yarn安装所需的内容:

1$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
2
3# or, using Yarn:
4$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

实施

现在我们已经在安装上金色了,我们将直接跳进并实施这些坏男孩。

<$>[注]使用FA图标的方法有很多,但我们将专注于构建一个库,以便在应用程序中轻松访问所有图标。

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

在本示例中,我们将使用封面和密钥图标. 所有图标都可以在字体 Awesome 的 图标库中找到。 所有图标导入都被转换为 camelCase,在开始时,fa 将所有图标排除。

1[label App.js]
2import { library } from '@fortawesome/fontawesome-svg-core';
3import { faEnvelope, faKey } from '@fortawesome/free-solid-svg-icons';
4
5library.add(faEnvelope, faKey);
6
7// ...

随着我们的项目的增长,我们只需要在App.js中导入和添加图标,想象一下,我们有一个名为SignUp.js的组件,我们需要使用这些图标。

1[label SignUp.js]
2import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
4/// ...

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

1[label SignUp.js]
2// ...
3
4<Label>
5  <FontAwesomeIcon
6    icon="envelope"
7  />
8  Username
9</Label>

请注意,所提供的图标名称并不与导入时相同。当将图标名称作为附件传递到FontAwesomeIcon组件时,我们只需要 图标的名称以小写字母

Form Feedback with Icon

我们的图标和文本有点模糊,我敢说,无聊,所以让我们在图标和标签文本之间添加一个空间,并改变图标的颜色和大小:

 1[label SignUp.js]
 2// ...
 3
 4<label>
 5  <FontAwesomeIcon
 6    icon="envelope"
 7    color="#6DB65B"
 8    size="sm"
 9  />
10  {' '}Username
11</label>

正如你所看到的,FontAwesomeIcon组件可以采取几种不同的附件来更改图标风格. 在这里,我们使用了颜色尺寸附件. 该尺寸附件预计有字符串值,如xs,lg,2x,3x... 还有一些可以传入的附件。

Colored Icons

<$>[注]这就是一切!看看那个可爱的用户界面。

TLDR 的

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

Published At
Categories with 技术
Tagged with
comments powered by Disqus