react-fontawesome: Missing correct(and/or complete) documentation with working demo

Following Installation and Usage or Explicit Import is not enough to get this library to run. I install the packages

$ yarn add @fortawesome/fontawesome
$ yarn add @fortawesome/react-fontawesome

and in my CRA bootstrapped app I add this:

import '@fortawesome/fontawesome'; # Added this to see if it fixes anything
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
#...
# inside a functional component
# ...
retrun <div>Displaying stuff and Font Awesome Component <FontAwesomeIcon icon="coffee" /></div>;

Once it renders everything else the errors are: Could not find icon {prefix: "fas", iconName: "coffee"}

Stack Overflow contradicts the documentation here and recommends installing additional libraries

yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

I haven’t made additional tests since, after additional research, the consensus is to avoid this library and I rolled back to Font Awesome 4 with css. I think this library and FA5 are an awesome idea.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 11
Comments: 18 (7 by maintainers)

Most upvoted comments

I have to agree with @darrencrossley after discovering this library and trying to get it working in my project I find there is way to much implementation leaking into the design of the API. It feels like a violation of the progressive disclosure principle.

My expectation is that I can go to the main github page for this project and copy and paste some code which renders an icon in my react app.

The reality is that in order to get even a simple icon to render I need to:

realize there’s a prerelease version which changes everything
switch to the development branch
add 3 yarn packages (which are all prerelease)
read up on the difference between free and pro versions of FontAwesome
learn about bundle optimization and the differences between explicit import and building my own library
implement one of the above in my app

IMO I should be able to add 1 package to my project and <FontAwesomeIcon icon="coffee" /> should show up on the screen.

I suggest the library authors expose a minimal set of defaults that make sense for quickly getting an icon rendered, and disclose advanced functionality progressively for power users.

Thanks for your hard work on this great project. I hope my feedback is helpful.

+28

esetnik on Jun 11, 2018

Doesn’t work at all.

62:57-72 "export 'default' (imported as 'FontAwesomeIcon') was not found in '@fortawesome/react-fontawesome'

I just spent over an hour installing the different packages and trying to follow documentation but nothing ends up working. Thanks for wasting my time.

+11

pugson on Apr 22, 2018

I love the work and design coming out of the fontawesome team - but it seems this implementation is just nuts - when did it become so hard to render some SVGs?

I’ve wasted so many hours trying to understand the logic here and IMO, the documentation is only the product of a highly overcomplicated system of packages and confusing implementation details that, when compared to something like react-icons which handles multiple icon packs and sources elegantly, makes life needlessly complicated for no benefit. It’s such a shame as I now groan when I need to add an icon to my project using FA5.

+10

darrencrossley on May 30, 2018

@pugson looks like you need to change your import. The pre-release has removed default exports. You can try this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

Otherwise if you still have issues and would like help you can post some examples of what you’re trying.

robmadole on Apr 26, 2018

@robmadole why removing the default export ?

glemiere on Jun 22, 2018

I agree this package is great and I appreciate the hard work the devs have put into it. For me I spent about 4 hours getting this package going so that I can use 10 icons in my app. In my case, the developer before me installed the released version last week and then I started trying to follow the documentation and realized there were major differences between the released version and the pre-released version. It is strange to me that the docs on the master branch are not for the released version but for the prerelease version. Perhaps the readme on the master branch should be for the current released version?

jfbloom22 on Aug 6, 2018

From UPGRADING.md @glemiere :

robmadole on Jun 27, 2018

Unfortunately, I have the same problems, I tried everything you, @robmadole mentioned here and in other issues plus also installing the ...@prerelease packages, manually bumping versions, tried to reinstall it completely but also the upgrade guide on the development branch, nothing works.

The only things I get are rotating error messages like those mentioned in other issues already.

I’m thankful for all efforts and love Font Awesome for every single project I have but at the moment it’s just a pita. 😕

keeev on Jun 17, 2018

@thatjsguy yeah, understood regarding running the pre-release in production. But as this issue started out as documentation related I just wanted to share that we have focused our improvements on the development branch. We’re in the final stages of getting this released on master.

robmadole on May 9, 2018