react-fontawesome 导入所有图标

Question

I'm trying to import just the fontawesome icons I need as the full library is 3mb. I've swapped to the fontawesome-react component to enable this but I'm not having much luck.

Here's my test case:

Package includes:

"@fortawesome/fontawesome-svg-core": "^1.2.4",
"@fortawesome/pro-regular-svg-icons": "^5.3.1",
"@fortawesome/react-fontawesome": "^0.1.3",

Component:

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

// In Render:
<FontAwesomeIcon
    icon={ faThumbsUp }
/>

Results in an include size of 1MB Is this expected behaviour?

It appears to be following the explicit import methodology - https://github.com/FortAwesome/react-fontawesome#user-content-explicit-import

Answer 1

如果你想通过新的 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" />

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

Answer 2

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

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

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

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

Answer 3

在我们的项目中，我们使用这种 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 lib 中的任何图标样式并将其直接应用到我们自己的类中：

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