0

I'm trying to use Fontawesome's React module of Free solid icons in a React based Design System. I want to access Fontawesome Icon as a string that is rendered by the FontAwesomeIcon component

Eg:

<FontAwesomeIcon icon="coffee"/>

or

<FontAwesomeIcon icon={['fas', iconProp]}

If this happens inside a React component, say Button component, which is a named export, should I import the Library (import './fontAwesomeLibrary.js') of icons in every other component in the Design system? 

The library file:

// fontAwesomeLibrary.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
   
library.add(fas)
Rakesh Peela
  • 41
  • 2
  • 6

1 Answers1

0

Much easier to pull in “FontAwesomeIcon” like below. The code you wrote above would not require you to import the icons each time though which may be benefiting depending on how you’re trying to use it.

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)
Community
  • 1
  • 1
Matthew Newman
  • 1