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

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

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