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 @         


        

Answer 1

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---------*/}









{/*-------Some Code---------*/}

This worked for me. I hope this helps!