Fontawesome 5 React Brand Icons not working - how to fix it?

Question

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

In rendering code:

<FontAwesomeIcon icon={'facebook'} />

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

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

Nothing works. I have the following errors:

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

What am I missing?

I saw someone's advice to import specific objects like -

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

from here Font Awesome 5 use social/brand icons in React (and it's not a duplicate).

But I don't want to import specific objects, because my users should be able to use any icons, and it's specified in the model.

It's also unclear how these icons all work.

Answer 1

I had to change the import to:

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

and add the following code:

library.add(fab);

After these changes everything started working.