在React中使用Font Awesome 5

Font Awesome is an... awesome (sorry I had to) product. React is a brilliant coding library. It would only make sense to use them together. I've been using Font Awesome for a long time and was stoked when their Kickstarter for the new version went live.

Font Awesome是一个很棒的产品（抱歉，我不得不）。 React是一个出色的编码库。 一起使用它们才有意义。 我使用Font Awesome已有很长时间了，当他们的新版本Kickstarter上线时，我很高兴。

There's a whopping 3,978 icons as of the time of this writing!

截至撰写本文时，共有3,978个图标！

We use React and Font Awesome together whenever you see an icon here on Scotch. That includes the user navigation, cards, brand icons, and more.

每当您在Scotch上看到一个图标时，我们就会同时使用React和Font Awesome。 其中包括用户导航，卡片，品牌图标等。

While the Font Awesome team has made a React component to make this integration easy, I found a couple gotchas and had to understand some fundamental things about the new Font Awesome 5 and how it's structured. I'll write up what I found and the ways to use the React Font Awesome component.

虽然Font Awesome团队制作了一个React组件来简化集成，但我发现了一些难题，并且不得不了解有关新Font Awesome 5的基本知识及其结构。 我将写下我发现的内容以及使用React Font Awesome组件的方法。

使用“真棒字体”的方法 ( Ways to use Font Awesome )

Normally, if you were used to how Font Awesome worked in their previous versions, then you would add the .css file to the head of your document and then use something like:

通常，如果您习惯了Font Awesome在其先前版本中的工作方式，则可以将.css文件添加到文档的开头，然后使用类似以下的内容：

<i class="fa fa-user-happy"></i>

This was cool in the previous version, but the downside was that we had to bring in the entire Font Awesome library even if we only used some fonts

在以前的版本中这很酷，但是缺点是即使我们只使用了某些字体，我们也必须引入整个Font Awesome库。

真棒字体5 (Font Awesome 5)

With Font Awesome 5, there are a few different ways we can use the icons.

有了Font Awesome 5，我们可以使用几种不同的方式来使用图标。

The SVG way has benefits detailed by the Font Awesome team and contrary to what I had originally thought, faster than the font-face way.

SVG方式具有Font Awesome团队详述的优点，并且与我最初的想法相反，它比font-face方式要快。

Another big benefit to the SVG way is that we can pick and choose what fonts we need and only include those in our final bundle size.

SVG方式的另一个大好处是，我们可以选择所需的字体，而仅将它们包括在最终的包装尺寸中。

Font Awesome和React一起出现的问题 (The problem with Font Awesome and React together)

With the SVG and JS way, the JS to parse our HTML and add the SVG may fire before React has time to mount it's components. So we have to find a way to parse the HTML once React has mounted its components.

使用SVG和JS方式，JS可以解析我们HTML并添加SVG，这可能会在React有时间安装其组件之前触发。 因此，一旦React安装了组件，我们就必须找到一种解析HTML的方法。

使用Font Awesome 5和React ( Using Font Awesome 5 and React )

Lucky for us, the Font Awesome team has created a React component to use Font Awesome with React. With this library, we are able to do the following after you pick your icon. We'll use the boxing-glove icon and do everything right inside App.js

幸运的是，Font Awesome团队创建了一个React组件，以将Font Awesome与React一起使用。 使用此库，我们可以在选择图标后执行以下操作。 我们将使用boxing-glove图标，并在App.js进行所有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"));

Now we have a little home icon! Notice how we can pick out only the home icon so that only one icon is added to our bundle size.

现在，我们有了一个主页图标！ 请注意，我们如何仅选择home图标，以便仅将一个图标添加到捆绑商品尺寸中。

It's tiny and not styled, but we have it!

它很小，没有样式，但是我们有！

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版本替换自身！

选择字体 ( Choosing Fonts )

I'm placing this section before installing/using because it's important to know how the Font Awesome libraries are laid out. Since there are so many icons, the team decided to split them up into multiple packages.

我将在安装/使用之前放置本节，因为了解Font Awesome库的布局非常重要。 由于图标太多 ，团队决定将它们分成多个包。

These packages are differentiated by the following. I'm also placing the package name that you would npm install here:

这些软件包的区别如下。 我还将在此处放置您将npm install的软件包名称：

When picking and choosing which fonts you want, I recommend visiting the Font Awesome icons page. Notice the filters along the left. Those are very important because they will indicate what package to import your icon from.

选择并选择所需的字体时，我建议访问字体真棒图标页面 。 请注意左侧的过滤器。 这些非常重要，因为它们将指示从中导入图标的软件包。

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

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

知道图标属于哪个包 (Knowing which package an icon belongs to)

You can figure out which package an icon belongs to by seeing 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. Here they are:

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

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

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

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

If you browse the Font Awesome icons page page, you'll notice that there are usually multiple versions of the same icon like this one:

如果浏览“ 字体真棒图标”页面页面，您会注意到，同一图标通常有多个版本，如下所示：

In order to use a specific icon, you will need to change up your <FontAwesomeIcon> a little bit. Here's using mutiple types of the same icon from different packages. Remember those three-letter shorthands we talked about earlier.

为了使用特定的图标，您将需要稍微更改<FontAwesomeIcon> 。 这里使用来自不同软件包的同一图标的多类型。 记住我们前面提到的三个字母的速记。

Note: The below examples won't work until we build an icon library in a few sections.

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

// solid version
<FontAwesomeIcon icon={['fas', 'code']} />

// defaults to solid version if not specified
<FontAwesomeIcon icon={faCode} />

And the light version using fal:

和轻型版本使用fal ：

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

We had to switch our icon prop to be an array instead of a simple string. Normally, the icon would default to the solid (fas) version so you could rewrite the above as:

我们必须将icon道具切换为数组而不是简单的字符串。 通常，该图标将默认为纯色（ fas ）版本，因此您可以将以上内容重写为：

使用专业字体 ( Using Pro Fonts )

Since the pro fonts are the fonts you have to pay for, they have to be paywalled somehow. How do we authenticate and then npm install? How does https://npmjs.org handle paid packages?

由于专业字体是您必须支付的字体，因此必须以某种方式对其进行付费。 我们如何进行身份验证然后再进行npm install ？ https://npmjs.org如何处理付费套餐？

We are going to add an .npmrc to the root of our application and you can find your secret key in our Font Awesome settings:

我们将在应用程序的根目录中添加一个.npmrc ， 您可以在Font Awesome设置中找到您的密钥 ：

Add your .npmrc to the root of your project with the following:

使用以下命令将.npmrc添加到项目的根目录：

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR-TOKEN-HERE

安装真棒字体 ( Installing Font Awesome )

I know this part sounds simple, but it actually tripped me up a bit. Since there are multiple versions of an icon, multiple packages, and free/pro packages, installing them all isn't as simple as installing one npm package.

我知道这听上去很简单，但实际上让我有些不适。 由于图标有多个版本，多个软件包和免费/专业软件包，因此安装它们并不像安装一个npm软件包那么简单。

You'll need to install multiple and pick and choose which icons you want. You can:

您需要安装多个图标，然后选择所需的图标。 您可以：

For this article, we'll install everything so we can demonstrate the multiple ways:

对于本文，我们将安装所有内容，以便我们演示多种方式：

// the base packagesnpm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

// regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

// solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

// light icons
npm i -S @fortawesome/free-light-svg-icons
npm i -S @fortawesome/pro-light-svg-icons

// brand icons
npm i -S @fortawesome/free-brands-svg-icons

Or if you prefer to get them all installed in one go:

或者，如果您希望一次性安装所有组件，请执行以下操作：

//if you just want the free things
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-light-svg-icons @fortawesome/free-brands-svg-icons

// if you have pro enabled and an .npmrc
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/free-light-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/free-brands-svg-icons

We've installed the packages, but haven't actually used them in our application or added them to our app bundles just yet. Let's look at how we can do that now.

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

创建图标库 ( 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 a bunch of places, you don't want to write that whole thing everywhere.

将所需的图标导入多个文件可能很繁琐。 假设您在很多地方都使用了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库 。

I like creating a fontawesome.js in the src folder and then importing 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).

我喜欢在src文件夹中创建fontawesome.js ，然后将其导入index.js 。 只要您要使用图标的组件具有访问权限（子组件），就可以随时添加此文件。

You could even do this right in your index.js or App.js, but I moved it out since this file can get large.

您甚至可以在index.js或App.js执行此App.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-regular-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 ：

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 )

This isn't recommended because you're importing every single icon into your app. Bundle size could get large but if you're so inclined, you can import everything from a package.

不建议这样做，因为您将每个图标都导入到应用程序中。 捆绑包的大小可能会变大，但是如果您愿意，可以从包中导入所有内容。

Let's say you wanted all the *brand icons *in @fortawesome/free-brands-svg-icons.

假设您想要@fortawesome/free-brands-svg-icons所有* 品牌图标* 。

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

library.add(fab);

fab represents the entire brands 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. Only use what you need.

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

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

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

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)

What about if you want all the types of boxing-glove for the fab, fas, and fal packages? Import them all as a different name and then add them.

如果您想要fab ， fas和fal软件包的所有类型的拳击手套怎么办？ 将它们全部导入为其他名称，然后添加它们。

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import { 
  faBoxingGlove as faBoxingGloveRegular 
} from '@fortawesome/regular-light-svg-icons';
import { 
  faBoxingGlove as faBoxingGloveSolid 
} from '@fortawesome/solid-light-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid 
);

You can then use them using the different prefixes:

然后可以使用不同的前缀来使用它们：

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

大小调整图标 ( Sizing Icons )

The ability to size icons was always a pain. Font Awesome 5 makes this incredibly easy. I find myself using this a ton.

调整图标大小的能力总是很痛苦。 Font Awesome 5使此操作变得异常简单。 我发现自己使用此一吨 。

Once you've installed everything and adding your icons to your Font Awesome library, let's use them and size them. I'll use the light (fal) since that's what we use around Scotch.io.

安装完所有内容并将图标添加到Font Awesome库后，让我们使用它们并调整大小。 我将使用light（ fal ），因为那是我们在Scotch.io周围使用的。

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

// named sizing
<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

// numbered sizing (up to 6)
<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

// decimal sizing
<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

着色图标和背景 ( Coloring Icons and Backgrounds )

Font Awesome has a cool way of styling the SVGs it uses. It just takes the text-color of the CSS!

Font Awesome具有一种很酷的样式来样式化它使用的SVG。 它只是采用CSS的文字颜色！

If you were to place a <p> tag where this icon were to go, what color would the paragraph be? That's the color of the icon!

如果要在要放置该图标的位置放置<p>标记，则该段落的颜色是什么？ 这就是图标的颜色！

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

转换图标 ( Transforming Icons )

Font Awesome has a nifty power transforms feature where you can string together different transforms.

Font Awesome具有漂亮的功能转换功能，您可以将不同的转换组合在一起。

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

You can use any of the transforms found on the Font Awesome site:

您可以使用在Font Awesome网站上找到的任何转换 ：

I've been using this a lot to move icons up/down/left/right to get the positioning perfect next to text or inside of buttons.

我已经经常使用它来向上/向下/向左/向右移动图标，以使文本或按钮内部的定位完美。

固定宽度图标 ( 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, we needed fixed widths for our navigation dropdown:

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

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

旋转图标 ( Spinning Icons )

Spinning is a cool trick that I use for form buttons when a form is processing. You can use the spinner icon to make a nice loading effect.

旋转是一个很酷的技巧，在处理表单时，我将其用于表单按钮。 您可以使用微调器图标来获得不错的加载效果。

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

You can use the spin prop on anything!

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

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

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

I haven't used this too much yet, but Font Awesome let's you combine two icons to make some cool effects with masking.

我没有用太多此类还，但字体真棒让你把两个图标，使一些很酷的效果掩盖 。

All you have to do is 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.

您所要做的就是定义常规图标，然后使用mask道具定义第二个图标放在顶部。 第一个图标将被限制在蒙版图标内。

We created our Tag Filters using masking:

我们使用遮罩创建了标签过滤器：

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

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上色并更改背景徽标：

在React之外使用react-fontawesome和图标 ( Using react-fontawesome and Icons Outside of React )

This is a tricky problem to have. Let's say that your entire site isn't a single-page-app (SPA). You have a traditional site and have sprinkled React on top, much like our own Scotch.io.

这是一个棘手的问题。 假设您的整个网站不是单页应用程序（SPA）。 您有一个传统网站，并且像我们自己的Scotch.io一样， 将React撒在了上面 。

It wouldn't be good to import the main SVG/JS library and then also import the react-fontawesome library. So which do we choose?

导入主要的SVG / JS库，然后再导入react-fontawesome库并不是很好。 那么我们选择哪个呢？

The Font Awesome team has seen this and has provided a way to use the React libraries to watch for icons outside of React components.

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:

如果您有任何<i class="fas fa-stroopwafel"></i> ，我们可以告诉Font Awesome使用以下方法观看和更新这些内容：

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver's are a cool new 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是一种很酷的新Web技术，它使我们能够观察DOM的性能变化。 在React Font Awesome文档中找到有关此技术的更多信息。

结论 ( Conclusion )

Using Font Awesome and React together is a great pairing. The move to the multiple packages and styles of icons threw me off when I first started using the two together. Hopefully this helped you out and you are well on your way to adding those hundreds of great icons to your projects.

一起使用Font Awesome和React是一个很好的配对。 当我第一次开始同时使用两者时，转向多种包装和图标样式的举动使我失望。 希望这对您有所帮助，并且您可以顺利地将数百个精美的图标添加到您的项目中。

翻译自: https://scotch.io/tutorials/using-font-awesome-5-with-react