Font Awesome 5 use social/brand icons in React - reactjs

Question

The Font Awesome documentation shows only how to add regular/solid fonts to React. How about social icons?
First I grabbed the packages:
npm i --save #fortawesome/fontawesome-svg-core \
npm i --save #fortawesome/free-brands-svg-icons \
npm i --save #fortawesome/react-fontawesome
Note: I replaced npm i --save #fortawesome/free-solid-svg-icons \ with npm i --save #fortawesome/free-brands-svg-icons \
Then in React:
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons'
library.add(faFacebookF);
And tried using a component:
<FontAwesomeIcon icon="fa-facebook-f" />
even tried:
and keep getting in the console
Could not find icon {prefix: "fas", iconName:
"fa-facebook-f"}
I believe I somehow have to get the fab prefix for brands.
This is the icon I want to use https://fontawesome.com/icons/facebook-f?style=brands

Answer 1

import { FontAwesomeIcon } from "#fortawesome/react-fontawesome"
import { faFacebook } from "#fortawesome/free-brands-svg-icons"
const icon = <FontAwesomeIcon icon={faFacebook} />
I found the spelling/casing of the brand icons on FontAwesome's GitHub

Answer 2

Try:
<FontAwesomeIcon icon={['fab', 'facebook-f']} />
Note that font awesome now has different icon sets. The solid set (fas) is the default. The facebook icon is in the brands set (fab).

Answer 3

Note that you must run the commands that you ran first:
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-brands-svg-icons
npm i --save #fortawesome/react-fontawesome
I'd tried to import without installing first - and of course that didn't work.

Answer 4

Firstly
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-brands-svg-icons
npm i --save #fortawesome/react-fontawesome
Then import in your project
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebookF , } from '#fortawesome/free-brands-svg-icons';
Use this
<FontAwesomeIcon icon={faFacebookF} />

Answer 5

Install these dependencies first
npm i --save #fortawesome/free-brands-svg-icons
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/react-fontawesome
Create a custom library initFontAwesome.js and paste this code.
import { library } from "#fortawesome/fontawesome-svg-core";
import {fab, faTwitterSquare, faFacebook, faLinkedin, faGithub} from "#fortawesome/free-brands-svg-icons";
function initFontAwesome() {
library.add(fab, faTwitterSquare, faFacebook, faLinkedin, faGithub);
}
export default initFontAwesome;
In the App.js include the following code
import initFontAwesome from "./initFontAwesome";
initFontAwesome();
function App() {
return (
{/*---------Some code----------*/}
);
}
export default App;
In Home.jsx include the following code
import React from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
{/*-------some Code---------*/}
<FontAwesomeIcon icon={['fab', 'twitter']} />
<FontAwesomeIcon icon={['fab', 'facebook']} />
<FontAwesomeIcon icon={['fab', 'linkedin']} />
<FontAwesomeIcon icon={['fab', 'github']} />
{/*-------Some Code---------*/}
This worked for me. I hope this helps!