YuWebdesign



Add FontAwsome to React App

By YuwebDesign

Installation

With npm:

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

With yarn:

yarn add --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Explicit Import

In App.js, where our app is initialized:

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

library.add(fab, faCheckSquare, faCoffee)

In functional Component:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
...
<div>
  <FontAwesomeIcon icon="check-square" />
  <FontAwesomeIcon icon="coffee" />
  <FontAwesomeIcon icon={['fab', 'apple']} />
  <FontAwesomeIcon icon={['fab', 'microsoft']} />
  <FontAwesomeIcon icon={['fab', 'google']} />
</div>

Source: https://github.com/FortAwesome/react-fontawesome

Leave a Reply or Comment

Your email address will not be published. Required fields are marked *