Using react-fontawesome

React-fontawesome is a great package that allows us to use react font-awesome with javascript and not CSS classes

Here is how it works:

// The font-awesome-icon component
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
// The svg icon from the PRO package
import { faCoffee } from '@fortawesome/pro-solid-svg-icons'
const component = () => (
  // Use the component and pass icon in as a prop
  <FontAwesomeIcon
    icon={faCoffee}
    size="md"
  />
)

Check the github docs for possible props which include the ability to the following:

Animate
Color
Size
Transpose
Translate and more...

NPM Packages

// react
'@fortawesome/react-fontawesome'
// icons
'@fortawesome/pro-solid-svg-icons'
'@fortawesome/pro-light-svg-icons'
'@fortawesome/pro-regular-svg-icons'
'@fortawesome/pro-duotone-svg-icons'
'@fortawesome/free-brands-svg-icons'