Font Awesome 5 use social/brand icons in React

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

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 2

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