如果你想通过新的 Fontawesome React 库以最简单的配置使用任何你想要的图标，你可以这样做：

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as Icons from '@fortawesome/free-solid-svg-icons';

const iconList = Object
  .keys(Icons)
  .filter(key => key !== "fas" && key !== "prefix" )
  .map(icon => Icons[icon])

library.add(...iconList)

（提示：(...iconList)这里使用的是将我们拥有的每个对象作为数组添加为函数参数）

然后在任何你想要的地方添加到你的代码中

<FontAwesomeIcon icon="check" />

现在您可以使用所有图标而无需全部导入 🤙

与 react-fa 团队讨论了这个问题，他们建议需要使用完整路径明确导入图标：

import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons/faThumbsUp';

这意味着剩余的项目将在 Webpack 的“摇树”过程中被移除。没有提到这一点，所以我建议应该在文档的显式导入部分提到这一点。

Anyhoo - 现在都在工作，所以感谢 FA 的那些人。

在我们的项目中，我们使用了这种 scss 技术 ( font-awesome@4.7.0)：

@import '~font-awesome/scss/font-awesome';

@mixin fa-icon($type) {
  @extend .fa;
  @extend .fa-#{$type};
}

i {
  @include fa-icon('star');
  margin-right: 0.2rem;
}

因此，我们的 css 包中只有我们需要的图标。

更新：使用带有babel-plugin-react-css-modules 的 react 组件，我们可以重用 font-awesome 库中的任何图标样式并将其直接应用到我们自己的类中：

.button {
  i {
    @include fa-icon('star');
  }
}

如果您认为摇树不起作用，您可以在此处找到解决方案。但大多数情况下，这是通过使用深度导入来解决的：

import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee' // <-- note the extra faCoffee there

但是如果你想一次导入所有图标，根据导入图标你可以通过这种方式导入所有图标：

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

// Add all icons to the library so you can use it in your page
library.add(fas, far, fab)

如果图标在 library 中有很多变化，您可以像这样使用它：

<FontAwesomeIcon icon={['fas', 'smile']} />
<FontAwesomeIcon icon={['far', 'smile']} />

由于所有图标现在都在库中，因此无需一一导入。