0

I am playing around with '@fortawesome/react-fontawesome'(using FontAwesome5) and this is what I am trying to do-

In my App.js

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faTrash, faCoffee, faSquare } from '@fortawesome/fontawesome-pro-light'
fontawesome.library.add(faTrash, faCoffee, faSquare)

and in my component.js

import {FontAwesomeIcon} from 'eui-components'

function Test () {
  return (

    <tr>
      <td><Button bsStyle="primary">
        Delete
        <FontAwesomeIcon icon = {["fal", "coffee"]}/>
      </Button>
      </td>
    </tr>
  )
}
export default Test

It works

And then I tried 

<FontAwesomeIcon icon={["fal", "bath"]} />

and that worked in spite of it not being added in library. This is very confusing. How can I make sure that only the items added to library will work? That was my understanding. Am I wrong?

Code can be seen in codesandbox.io/s/40v5jk6no7

Sadanand
  • 1,080
  • 3
  • 13
  • 30
Kimaya
  • 1,210
  • 4
  • 14
  • 33
  • Your code looks fine, not sure what's going on. After poking through the docs though, this library is really overcomplicating things. Checkout [React Icons](https://gorangajic.github.io/react-icons/) as a simpler alternative. – Chase DeAnda Mar 09 '18 at 20:25
  • Did the code above work? because i see that – iceveda06 Mar 09 '18 at 21:28
  • I would also put your code into some kind of a code sandbox so we can see what it looks like when it works. Try to upload your code to CodeSandbox.io and share the link with us – iceveda06 Mar 09 '18 at 21:30
  • https://codesandbox.io/s/40v5jk6no7 I have the code here, Here I have added only Coffee and CheckSquare into library, but I am stilll able to display "trash" –  Kimaya Mar 12 '18 at 15:19
  • I found the solution. I am supposed to import it with the filename at the end- @fortawesome/fontawesome-free-solid/faSquare. Have updated my code. Wish their documentation was clearer –  Kimaya Mar 12 '18 at 17:01

0 Answers0