在 React 应用程序中使用 FontAwesome 图标

你可能没有意识到，但图标和徽标是现代应用程序的重要组成部分。在 React 中构建界面时，开发人员可以使用许多不同的工具包和包含图标的包。FontAwesome 是最好的选择之一，因为它提供了各种各样的图标。FontAwesome 背后的团队也努力将图标集成到 React 生态系统中。

在 React 中使用 FontAwesome

为 React 选择一个 FontAwesome 图标

一旦你确定了你的应用程序需要什么类型的图标，你可以在 Font Awesome Icons 页面上搜索相关的关键字来找到合适的东西。你在左侧看到的过滤器对于缩小选择范围至关重要。他们可以帮助你找到你正在寻找的确切内容，更重要的是，告诉你需要安装哪个 FontAwesome 包。

要安装常规图标，请在命令行中执行以下命令：

npm install --save @fortawesome/free-regular-svg-icons

要探索你可以安装的所有不同软件包，请查看本指南。

创建库

随着应用程序的增长，你将需要许多不同文件中的图标。一遍又一遍地导入相同的图标可能会让人筋疲力尽。相反，你可以在一个 JavaScript 文件中导入你需要的每个图标，你将在其中创建一个 FA 库。

通常将你的图标库存储在 src 文件夹中。该库应包含整个 React 应用程序中使用的所有图标。完成后，将库导入父组件（通常是 App.js），以便所有子组件都可以访问它。

这是一个简单的图标库的样子：

import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faCoffee,
    faCheckSquare,
);

使用 <FontAwesomeIcon/>

react-fontawesome 包包含一个 <FontAwesomeIcon /> 自定义组件，该组件明确创建以在 React 应用程序中使用 FA 图标。单独的组件方法可以为你提供性能提升并最小化整个包的大小。

要使用 <FontAwesomeIcon/> 组件，你必须安装 react-fontawesome 包。你还需要导入特定的图标。例如，如果你要使用 Twitter 徽标，则需要导入 faTwitter 图标。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

icon 属性是最重要的，但其他属性可以帮助你自定义图标。

size 属性接受许多不同的值 - sm 代表小号，md 代表中号，lg 代表大号，而 xl 代表超大号。它还接受数字值，这可以帮助你相对于其标准大小缩放图标。你可以使用 2x 和 6x 值之间的数值来相应地放大图标。你还可以使用十进制值。你还可以使用内联样式来更改 <FontAwesomeIcon /> 组件的外观。

使用 className

如果你正在使用 create-react-app CLI 开发 React 应用程序，你可以使用 className 属性来显示图标。如果你来自其他框架或语言，这很可能是你习惯使用 FontAwesome 的方式。

不要忘记，在 JSX 语法中，你必须使用 className 属性，就像常规 DOM 一样。这是必要的，因为 JavaScript 中的 class 是一个保留字。

一旦你安装了 font-awesome 库，你必须将它导入到 index.js 文件中。该文件必须包括：

import 'font-awesome/css/font-awesome.min.css';

导入图标样式后，你可以在 JSX 中使用常规的 className 语法：

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}