Fontawesome 5 React 品牌图标不起作用 - 如何解决？答案

【问题标题】：Fontawesome 5 React Brand Icons not working - how to fix it?Fontawesome 5 React 品牌图标不起作用 - 如何解决？
【发布时间】：2019-11-19 03:12:29
【问题描述】：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import '@fortawesome/fontawesome-free-solid';
import '@fortawesome/free-brands-svg-icons';

在渲染代码中：

<FontAwesomeIcon icon={'facebook'} />

<FontAwesomeIcon icon={['fab','facebook']} />

<FontAwesomeIcon icon={['fab','facebook-f']} />

没有任何作用。我有以下错误：

backend.js:6 Could not find icon {prefix: "fab", iconName: "facebook"} 
    in FontAwesomeIcon (created by MyView)
    in DashboardView (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route

我错过了什么？

我看到有人建议导入特定对象，例如 -

import { faFacebookF } from '@fortawesome/free-brands-svg-icons'

从这里Font Awesome 5 use social/brand icons in React（它不是重复的）。

但我不想导入特定对象，因为我的用户应该能够使用任何图标，并且它在模型中指定。

目前还不清楚这些图标是如何工作的。

【问题讨论】：

标签： reactjs font-awesome-5

【解决方案1】：

我不得不将导入更改为：

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

并添加以下代码：

library.add(fab);

在这些更改之后，一切都开始工作了。

【讨论】：