React FontAwesome

This is more of a snippet than a blog.....

It is always a pain to find the right documentation and application principle to implement such small functionalities seamlessly in our frontend applications

Hence, this blog. Nothing much....just a simple set of instructions to follow to start using fontawesome icons as React Components.

Markdown

STEP 1 : Install these packages

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

STEP 2 : Set up a FontAwesomeIcons.js file in root directory to add all reqd icons to the “library”. NOTE THE  faIcon syntax (pascal cased) in the icon names

import {library} from '@fortawesome/fontawesome-svg-core'
import {faCarBattery, faBatteryHalf, faBolt} from '@fortawesome/free-solid-svg-icons'

library.add(faCarBattery, faBatteryHalf, faSpinner, faDirections, faAtom, faBolt)

STEP 3 : Call this FontAwesomeIcons.js file in your topmost parent component (preferably use App.js as it is the root parent component) to beam down all icons added to library to child components

import {library} from '@fortawesome/fontawesome-svg-core'
import {faCarBattery, faBatteryHalf, faBolt} from '@fortawesome/free-solid-svg-icons'

library.add(faCarBattery, faBatteryHalf, faSpinner, faDirections, faAtom, faBolt)

STEP 4 : Use the FontAwesomeIcons in any child component inheriting the library by simply Importing the FontAwesomeIcon component

import React from 'react'
import { faBolt } from '@fortawesome/free-solid-svg-icons'Bolt	

const ChildComponent = () => {
    return (
        <div>
            <FontAwesomeIcon icon='bolt'></FontAwesomeIcon>
        </div>
    )
}

export default ChildComponent

Using the icons added to library. Note the “icon” syntax here for calling icons added to the library

Conclusion

That's all there is to this folks ! 4 steps....its that easy. Hope this saved you some unnecessary roaming around for the right answer on Stack Overflow or finding the right docs

To now implement further customization on our imported icons....I recommend you to check out these official docs by Font Awesome