Integrate Font Awesome with React and Next Js Applications

To get started you’ll need to install the following packages into your project using a package manager like npm and yarn.

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/react-fontawesome
/* 
solid-svg and brands-svg are free icons 
which include both solid style icons & brands like github 
*/
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

Using Icons via Individual Use
Again, with this method, you’ll need to explicitly import icons into each component. Here’s a simple example.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Using Icons via Global Use
You probably want to use icons in more than one component in your project, right? Importing icons into each of your project’s components can be really tedious and prone to display errors - especially over time.

Instead, you can add them once in your React application and reference them in any component by importing them via a “library” in the initializing module of your React application.

Here’s an example:

Let’s say we have a React Application, “Blog”, that display all the social icons in various components like Footer, Contact US

We use Blog's App.js to initialize our app and library. Our app’s UI wants to use individual icons like envelope and We also add all of the brands in @fortawesome/free-brands-svg-icons to add the icons like github and twitter.

App.js

import ReactDOM from 'react-dom'
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab, faEnvelope)

export default function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

SocialIcons.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'



const SocialIcons = () => (

    <div className="row">

      <div className="pr-3">

         <a href="mailto:ravitejakolla29@gmail.com">
             <FontAwesomeIcon icon="envelope" size="2x" />
         </a>

      </div>

      <div className="pr-3">

         <a href="https://www.linkedin.com/in/ravitejakolla">
             <FontAwesomeIcon icon={["fab", "linkedin"]} size="2x" />
         </a>

      </div>

      <div className="pr-3">

         <a href="https://github.com/ravi-kolla">
             <FontAwesomeIcon icon={["fab", "github"]} size="2x" />
         </a>

      </div>

      <div className="pr-3">

         <a href="https://twitter.com/ravitejakolla">
             <FontAwesomeIcon icon={["fab", "twitter"]} size="2x" />
         </a>

      </div>

    </div>

)



export default SocialIcons;

How does this work with Next Js App?

Till now what ever we implemented above will work fine for React Js application, but for this to work in next js app we need to add some more configurations and update our _app.js as well.
Follow the next steps for icons to show up in your Next Js application

We need to make sure the CSS for Font Awesome is bundled with the Next.js app.

npm install --save @zeit/next-css

Create or edit next.config.js in the root of your project:

const withCSS = require('@zeit/next-css')

module.exports = withCSS({

  /* config options here */

})

Updated _app.js:

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css'
/* Tell Font Awesome to skip adding the CSS automatically since it's being imported above */
config.autoAddCss = false 

library.add(fab, faEnvelope)

export default function App({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

That's it! Font Awesome icons should be showing up now.
Happy Coding!