在本系列的第一部分,我们演示了reactstrap,以快速和高效地创建简单的表单. 在本片中,我们将使用 Font Awesome 5 添加一些 SVG 图标,使我们的表单更加有吸引力。
注意:字体 Awesome 5.1 欢迎大量的改进,其中包括对代码库的完整重写。如果您正在使用版本 4,请遵循他们的 升级步骤以确保一致性。
系列
- Part 1: Fancy Forms in React with ReactStrap
- Part 2: 使用字体 Awesome 5 在 React
什么是新?
通过重新编写整个代码库,并为用户提供新的和刷新功能,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, Vue和 Ember。
为了资助这一快速而强大的发展,FA推出了 Font Awesome Pro,它为用户提供了额外的设计灵活性和功能性. 如果您是V4中的免费功能的粉丝,不要担心!V4中的所有功能仍然在免费计划中,有错误修复和更新。
觀看他們的全方位,看他們的全方位。
安装
让我们从我们在第一部分停留的地方拿起,我们采取了添加一些CSS的自由,以获得一个.io感觉。
要开始,我们将安装react-fontawesome和SVG库fontawesome-svg-core和fontawesome-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组件时,我们只需要 图标的名称以小写字母。
我们的图标和文本有点模糊,我敢说,无聊,所以让我们在图标和标签文本之间添加一个空间,并改变图标的颜色和大小:
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... 还有一些可以传入的附件。
<$>[注]这就是一切!看看那个可爱的用户界面。
TLDR 的
reactstrap + react-fontawesome = 一个快乐的开发者