react awesome_如何在React中使用Awesome 5字体

柔情只为你懂 2022-11-27 04:25 141阅读 0赞

react awesome

### 介绍 **(**Introduction**)** ###

[Font Awesome][] is a toolkit for websites that provides icons and social logos. [React][] is a coding library that is used for creating user interfaces. While the Font Awesome team has made a [React component][] to promote integration, there are some fundamentals to understand about Font Awesome 5 and how it is structured. In this tutorial you’ll explore how to use the React Font Awesome component.

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

## 先决条件 **(**Prerequisites**)** ##

No coding is required for this tutorial, but if you are interested in experimenting with some of the examples you will need the following:

本教程不需要编码，但是如果您有兴趣尝试一些示例，则需要满足以下条件：

*  Node.js installed locally, which you can do by following [How to Install Node.js and Create a Local Development Environment][].
    
    Node.js在本地安装，您可以按照[如何安装Node.js和创建本地开发环境进行操作][How to Install Node.js and Create a Local Development Environment] 。
 *  [Create React App][], which you can do by following [How To Set Up A React Project][].
    
    [创建React应用程序][Create React App] ，您可以按照[如何设置React项目来完成][How To Set Up A React Project] 。

## 第1步—使用真棒字体 **(**Step 1 — Using Font Awesome**)** ##

The Font Awesome team created a [React component][] so you can use the two together. With this library, you can follow the tutorial after you [select your icon][].

Font Awesome团队创建了一个[React组件，][React component]因此您可以将两者一起使用。 使用此库，您可以在[选择图标][select your icon]后按照本教程进行操作。

In this example, we’ll use the `home` icon and do everything in the `App.js` file:

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

src/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"));

Your app now has a small home icon. You’ll notice that this code only selects the `home` icon so that only one icon is added to our bundle size.

您的应用程序现在带有一个小主页图标。 您会注意到，此代码仅选择`home`图标，因此我们的捆绑包尺寸仅添加了一个图标。

Now, Font Awesome will make sure that this component will replace itself with the SVG version of that icon once this component is mounted.

现在，Font Awesome将确保在安装该组件后，将该组件替换为该图标的SVG版本。

## 第2步-选择图标 **(**Step 2 — Choosing Icons**)** ##

Before installing and using the icons, it’s important to know how the Font Awesome libraries are structured. Since there are many icons, the team decided to split them up into multiple packages.

在安装和使用图标之前，了解Font Awesome库的结构非常重要。 由于图标很多，因此团队决定将它们分成多个包。

When picking and choosing which icons you want, it’s recommend to visit the [Font Awesome icons page][select your icon] to explore your options. You will see different filters to choose from along the left side of the page. These filters are very important because they will indicate what package to import your icon from.

选择并选择所需的图标时，建议访问“ [真棒字体”图标页面][select your icon]以浏览选项。 您会在页面左侧看到不同的过滤器供您选择。 这些过滤器非常重要，因为它们将指示从中导入图标的软件包。

In the example above, we pulled the `home` icon out of the `@fortawesome/free-solid-svg-icons` package.

在上面的示例中，我们从`@fortawesome/free-solid-svg-icons`包中拉出了`home`图标。

### 确定图标属于哪个包 **(**Determining which Package an Icon Belongs To**)** ###

You can figure out which package an icon belongs to by reviewing the filters on the left. You can also click into an icon and see the package it belongs to.

您可以通过查看左侧的过滤器来确定图标属于哪个包。 您也可以单击一个图标，查看其所属的软件包。

Once you know which package a font belongs to, it’s important to remember the three-letter shorthand for that package:

一旦知道了字体属于哪个程序包，记住该程序包的三个字母的简写就很重要：

*  Solid Style - `fas`
    
    实体风格`fas`
 *  Regular Style - `far`
    
    常规风格- `far`
 *  Light Style - `fal`
    
    轻型`fal`
 *  Duotone Style - `fad`
    
    双色调风格- `fad`

You can search for a specific type from the icons page:

您可以从图标页面搜索特定类型：

### 使用特定程序包中的图标 **(**Using Icons from Specific Packages**)** ###

If you browse the [Font Awesome icons page][select your icon], you’ll notice that there are usually multiple versions of the same icon. For example, let’s take a look at the `boxing-glove` icon:

如果浏览[Font Awesome图标页面][select your icon] ，您会注意到同一图标通常有多个版本。 例如，让我们看一下`boxing-glove`图标：

In order to use a specific icon, you will need to adjust `<FontAwesomeIcon>`. Following are multiple types of the same icon from different packages. These include three-letter shorthands discussed earlier.

为了使用特定的图标，您将需要调整`<FontAwesomeIcon>` 。 以下是来自不同软件包的同一图标的多种类型。 其中包括前面讨论的三字母速记。

**Note:** The following examples won’t work until we build an icon library in a few sections.

**注意：**以下示例只有在我们分成几节来构建图标库后才能起作用。

Here is an example of the solid version:

这是固定版本的示例：

This defaults to solid version if a type is not specified:

如果未指定类型，则默认为实体版本：

And the light version using `fal`:

以及使用`fal`的轻量版本：

<FontAwesomeIcon icon={['fal', 'code']} />;

We had to switch our `icon` prop to be an array instead of a simple string.

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

## 第3步—安装真棒字体 **(**Step 3 — Installing Font Awesome**)** ##

Since there are multiple versions of an icon, multiple packages, and free/pro packages, installing them all involves more than one `npm` package. You may need to install multiples and then choose the icons you want.

由于图标有多个版本，多个软件包和免费/专业软件包，因此安装它们都涉及多个`npm`软件包。 您可能需要安装多个图标，然后选择所需的图标。

For this article, we’ll install everything so we can demonstrate how to install multiple packages.

对于本文，我们将安装所有内容，以便我们演示如何安装多个软件包。

Run the following command to install the base packages:

运行以下命令以安装基本软件包：

*  npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome
    
    npm我-S @ fortawesome / fontawesome-svg-core @ fortawesome / react-fontawesome

Run the following commands to install the regular icons:

运行以下命令以安装常规图标：

*  \# regular icons
    
    ＃常规图标
 *  npm i -S @fortawesome/free-regular-svg-icons
    
    npm我-S @ fortawesome / free-regular-svg-icons
 *  npm i -S @fortawesome/pro-regular-svg-icons
    
    npm我-S @ fortawesome / pro-regular-svg-icons

These will install the solid icons:

这些将安装实心图标：

*  \# solid icons
    
    ＃实心图标
 *  npm i -S @fortawesome/free-solid-svg-icons
    
    npm我-S @ fortawesome / free-solid-svg-icons
 *  npm i -S @fortawesome/pro-solid-svg-icons
    
    npm我-S @ fortawesome / pro-solid-svg-icons

Use this command for light icons:

使用此命令显示灯光图标：

*  \# light icons
    
    ＃灯光图标
 *  npm i -S @fortawesome/pro-light-svg-icons
    
    npm我-S @ fortawesome / pro-light-svg-icons

This will install duotone icons:

这将安装双色调图标：

*  \# duotone icons
    
    ＃双色调图标
 *  npm i -S @fortawesome/pro-duotone-svg-icons
    
    npm我-S @ fortawesome / pro-duotone-svg-icons

Finally, this will install brand icons:

最后，这将安装品牌图标：

*  \# brand icons
    
    ＃品牌图标
 *  npm i -S @fortawesome/free-brands-svg-icons
    
    npm i -S @ fortawesome / free-brands-svg-icons

Or, if you prefer to get them all installed in one go, you can use this command to install the free icon sets:

或者，如果您希望一次性全部安装它们，则可以使用以下命令来安装免费的图标集：

*  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
    
    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

If you have a pro account with Font Awesome, you can use the following to install all of the 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
    
    npm我-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

You’ve installed the packages but haven’t yet used them in your application or added them to our app bundles yet. Let’s look at how you can do that in the next step.

您已经安装了软件包，但尚未在您的应用程序中使用它们或将它们添加到我们的应用程序捆绑包中。 让我们看看如何在下一步中做到这一点。

## 第4步-创建图标库 **(**Step 4 — Creating an Icon Library**)** ##

It can be tedious to import the icon you want into multiple files. Let’s say you use the Twitter logo in several places, you don’t want to have to write that multiple times.

将所需的图标导入多个文件可能很繁琐。 假设您在多个地方使用了Twitter徽标，而您又不想多次写下该徽标。

To import everything in one place, instead of importing each icon into each separate file, we’ll create a [Font Awesome library][].

为了将所有内容都导入一个地方，而不是将每个图标导入每个单独的文件中，我们将创建一个[Font Awesome库][Font Awesome library] 。

Let’s create `fontawesome.js` in the `src` folder and then import that into `index.js`. Feel free to add this file wherever as long as the components you want to use the icons in have access (are child components). You could even do this right in your `index.js` or `App.js`. However, it can be better to move this out to a separate file since it can get large:

让我们在`src`文件夹中创建`fontawesome.js` ，然后将其导入`index.js` 。 只要您要使用图标的组件具有访问权限(子组件)，就可以随时添加此文件。 您甚至可以在`index.js`或`App.js`执行此`App.js` 。 但是，最好将其移到一个单独的文件中，因为它可能会变得很大：

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

If you did this in its own file, then you’ll need to import into `index.js`:

如果您在自己的文件中执行此操作，则需要导入`index.js` ：

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

### 导入整个图标包 **(**Importing an Entire Icon Package**)** ###

It isn’t recommended to import an entire package because you’re importing every single icon into your app which could cause a large bundle size. If you do need to important an entire package, you certainly can.

不建议导入整个程序包，因为您会将每个单独的图标导入应用程序中，这可能会导致较大的文件包大小。 如果您确实需要整个软件包的重要性，那么您肯定可以。

In this example, let’s say you wanted all the brand icons in `@fortawesome/free-brands-svg-icons`. You would use the following to import the entire package:

在此示例中，假设您想要`@fortawesome/free-brands-svg-icons`所有品牌`@fortawesome/free-brands-svg-icons` 。 您将使用以下命令导入整个程序包：

src/fontawesome.js

src / fontawesome.js

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

`fab` represents the entire brand icon package.

`fab`代表整个品牌图标包。

### 分别导入图标 **(**Importing Icons Individually**)** ###

The recommended way to use Font Awesome icons is to import them one by one so that your final bundle sizes are as small as possible, as you will only import what you need.

建议使用“真棒字体”图标的方法是逐一导入它们，以使最终的捆绑包尺寸尽可能小，因为您只会导入所需的东西。

You can create a library from multiple icons from the different packages like so:

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

src/fontawesome.js

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

### 从多种样式导入相同的图标 **(**Importing the Same Icon from Multiple Styles**)** ###

If you want all the types of `boxing-glove` for the `fal`, `far`, and `fas` packages, you can import them all as a different name and then add them.

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

src/fontawesome.js

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

You can then use them by implementing the different prefixes:

然后，您可以通过实现不同的前缀来使用它们：

## 步骤5 —使用图标 **(**Step 5 — Using Icons**)** ##

Now that you have installed what you need and have added your icons to your Font Awesome library, you are ready to use them and assign sizes. In this tutorial, we’ll use the light (`fal`) package.

现在，您已经安装了所需的东西，并将图标添加到Font Awesome库中，可以使用它们并分配大小了。 在本教程中，我们将使用light( `fal` )包。

This first example will use the normal size:

第一个示例将使用正常大小：

The second example can use *named sizing*, which uses abbreviations for small (`sm`), medium (`md`), large (`lg`), and extra-large (`xl`):

第二个示例可以使用*命名的sizing* ，它对小( `sm` )，中( `md` )，大( `lg` )和超大( `xl` )使用缩写：

The third option is to use numbered sizing which can go up to `6`:

第三种选择是使用编号的大小，最多可以为`6` ：

When using numbered sizing, you can also use decimals to find the perfect size:

使用数字大小调整时，您还可以使用小数来找到理想的大小：

Font Awesome styles the SVGs it uses by taking the text-color of the CSS. If you were to place a `<p>` tag where this icon were to go, the color of the paragraph would be the color of the icon:

Font Awesome通过使用CSS的文本颜色来为其使用的SVG设置样式。 如果要在要放置此图标的位置放置`<p>`标记，则段落的颜色将是图标的颜色：

Font Awesome also has a [power transforms][] feature where you can string together different transforms:

Font Awesome还具有[强大的变换][power transforms]功能，您可以将不同的变换串在一起：

You can use any of the [transforms found on the Font Awesome site][]. You can use this to move icons up, down, left, or right to get the positioning perfect next to text or inside of buttons.

您可以使用[在Font Awesome网站上找到的][transforms found on the Font Awesome site]任何[转换][transforms found on the Font Awesome site] 。 您可以使用此按钮上下，左右移动图标，以使文本或按钮内部的定位完美。

### 固定宽度图标 **(**Fixed Width Icons**)** ###

When using icons in a spot where they all need to be the same width and uniform, Font Awesome lets us use the `fixedWidth` prop. For instance, let’s say that you need fixed widths for your navigation dropdown:

在需要全部具有相同宽度和统一性的位置使用图标时，Font Awesome让我们使用`fixedWidth`道具。 例如，假设您的导航下拉列表需要固定宽度：

### 旋转图标 **(**Spinning Icons**)** ###

Spinning is useful to implement on form buttons when a form is processing. You can use the spinner icon to make a nice loading effect:

处理表单时，旋转对于在表单按钮上实现很有用。 您可以使用微调器图标来获得不错的加载效果：

You can use the `spin` prop on anything!

您可以在任何东西上使用`spin`道具！

### 高级：遮罩图标 **(**Advanced: Masking Icons**)** ###

Font Awesome allows you to combine two icons to make effects with [masking][]. You define your normal icon and then use the `mask` prop to define a second icon to lay on top. The first icon will be constrained within the masking icon.

Font Awesome(字体真棒)使您可以将两个图标组合在一起以产生具有[遮罩的][masking]效果。 您定义普通图标，然后使用`mask`道具定义第二个图标放在顶部。 第一个图标将被限制在蒙版图标中。

In this example, we created tag filters using masking:

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

Notice how you can chain together multiple `transform` props to move the inner icon to fit inside the masking icon.

请注意，如何将多个`transform`道具链接在一起，以移动内部图标使其适合蒙版图标。

We even colorize and change out the background logo with Font Awesome:

我们甚至使用Font Awesome上色并更改背景徽标：

## 第6步—在React之外使用`react-fontawesome`和图标 **(**Step 6 — Using `react-fontawesome` and Icons Outside of React**)** ##

If your entire site isn’t a single-page application (SPA), and instead you have a traditional site and have [added React on top][]. To avoid importing the main SVG/JS library and also the `react-fontawesome` library, Font Awesome has created a way to use the React libraries to watch for icons outside of React components.

如果您的整个网站不是单页应用程序(SPA)，而是您有一个传统网站，并[在顶部添加了React][added React on top] 。 为了避免导入主要的SVG / JS库以及`react-fontawesome`库，Font Awesome创建了一种使用React库监视React组件外部图标的方法。

If you have any `<i class="fas fa-stroopwafel"></i>`, we can tell Font Awesome to watch and update those using the following:

如果您有任何`<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][]’s are a web technology that allow us to watch the DOM for changes performantly. Find out more about this technique on the [React Font Awesome docs][].

[MutationObserver][]是一项网络技术，可让我们观察DOM的性能变化。 在[React Font Awesome docs][]上找到有关此技术的更多信息。

## 结论 **(**Conclusion**)** ##

Using Font Awesome and React together is a great pairing, but creates the need to use multiple packages and consider different combinations. In this tutorial you explored some of the ways you can use Font Awesome and React together.

结合使用Font Awesome和React是一个很好的配对，但是需要使用多个软件包并考虑不同的组合。 在本教程中，您探索了一些可以一起使用Font Awesome和React的方法。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react][https_www.digitalocean.com_community_tutorials_how-to-use-font-awesome-5-with-react]

react awesome

[Font Awesome]: https://fontawesome.com/
[React]: https://reactjs.org/
[React component]: https://github.com/FortAwesome/react-fontawesome
[How to Install Node.js and Create a Local Development Environment]: https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment
[Create React App]: https://github.com/facebook/create-react-app
[How To Set Up A React Project]: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-create-react-app
[select your icon]: https://fontawesome.com/icons
[Font Awesome library]: https://github.com/FortAwesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently
[power transforms]: https://github.com/FortAwesome/react-fontawesome#advanced
[transforms found on the Font Awesome site]: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
[masking]: https://fontawesome.com/how-to-use/on-the-web/styling/masking
[added React on top]: https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application
[MutationObserver]: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
[React Font Awesome docs]: https://fontawesome.com/how-to-use/on-the-web/using-with/react
[https_www.digitalocean.com_community_tutorials_how-to-use-font-awesome-5-with-react]: https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react