react-fontawesome导入所有图标

Question

我正在尝试仅导入我需要的字体图标，因为完整的库为3mb。我已经切换到fontawesome-react组件来启用此功能，但是运气不高。

这是我的测试用例：

包装包括：

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

组件：

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

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

包含的大小为1MB 这是预期的行为吗？

它似乎遵循显式导入方法-https://github.com/FortAwesome/react-fontawesome#user-content-explicit-import

Answer 1

与react-fa小组讨论了此问题，他们建议需要使用完整路径显式导入图标：

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

这意味着Webpack将在“摇树”过程中删除其余项目。对此没有提及，所以我建议应在文档的显式导入部分中提及。

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

Answer 2

在我们的项目中，我们使用以下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');
  }
}

Answer 3

如果您想通过新的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 4

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

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

但是，如果您想一次导入所有图标，则可以按照Importing Icons的方式导入所有图标：

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)

如果图标in a library有很多变体，则可以这样使用它：

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

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