Missing correct(and/or complete) documentation with working demo

[MFry]

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.

[robmadole]

Hey @MFry try our pre-releases.

https://github.com/FortAwesome/react-fontawesome/tree/development

We've updated the docs and a lot of the code and would love to know if this help you out.

[pugson]

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.

[robmadole]

@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.

[thestephenmarshall]

On 0.0.17 here and experiencing the same issues as @pugson. Same setup.

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

const myComponent = () => {
   return (
      <FontAwesomeIcon icon="coffee" />
   )
}

export default myComponent

Renders nothing but React error because no component was found. (Likely bc not pre-release)

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

const myComponent = () => {
   return (
      <FontAwesomeIcon icon="coffee" />
   )
}

export default myComponent

Renders empty React node.

I don't think I'll be running a pre-release of anything in a production env.

[robmadole]

@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.

[darrencrossley]

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.

[robmadole]

@darrencrossley the docs in the development branch don't improve this?

[esetnik]

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:

1. realize there's a prerelease version which changes everything
2. switch to the development branch
3. add 3 yarn packages (which are all prerelease)
4. read up on the difference between free and pro versions of FontAwesome
5. learn about bundle optimization and the differences between explicit import and building my own library
6. 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.

[keeev]

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. 😕

[hollygirouard]

I'm also having some trouble in the same category. Any update on when this should be released? I have a similar issue that's driving me batty.

in my App.js file I'm adding and importing all my icons like so:

import { faBars, faChartLine, faShoppingCart, faUserCircle, faSignOutAlt, faEnvelope, faKey, faBirthdayCake, faCheckCircle, faAddressCard, faPhone, faComment, faUserAlt, faAddressBook, faShareSquare, faMoneyBillWave, faPencilAlt, faWindowClose, faCopyright, } from '@fortawesome/fontawesome-free-solid/'

and

fontawesome.library.add( brands, faBars, faShoppingCart, faChartLine, faUserCircle, faSignOutAlt, faEnvelope, faKey, faBirthdayCake, faCheckCircle, faAddressCard, faPhone, faComment, faUserAlt, faAddressBook, faShareSquare, faMoneyBillWave, faPencilAlt, faWindowClose, faCopyright, );

in console, I can't even tell what's going wrong.

To make things even more complicated, I'm using functional components.

I have a reactstrap based textinput field where I import like:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Then I bring in props for each variable here:

render() { const { text, id, value, placeholder, name, handleChange, type, icon, labelSize, xsColSize, smColSize, // feedbackText, } = this.props; return ( <Row> <Label sm={ labelSize }> { icon ? <FontAwesomeIcon icon={ icon } /> : null } &nbsp;{ text } </Label> <Col xs={ xsColSize } sm={ smColSize }> <FormGroup className={ this.state.validate.nameState } > <Input type={ type } style={ type === 'textarea' ? { height: '300%' } : null } value={ value } id={ id } name={ name } onChange={ (e) => { this.validateNotEmpty(e) handleChange(e) } } valid={ this.state.validate.nameState === 'has-success' } invalid={ this.state.validate.nameState === 'has-danger' } placeholder={ placeholder } /> {/* <FormFeedback invalid> Please enter your { feedbackText }. </FormFeedback> */} </FormGroup> </Col> </Row> ); } }

In my Submission file, I'm importing font awesome again like:

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Then passing the props to the icon here:

<TextInput icon="address-card" text="First Name *" htmlFor="first-name" id="first-name" name="firstName" value={ firstName } placeholder="First Name" handleChange={ this.handleChange } type="text" feedbackText="first name" />

Unfortunately I can't even trace back to which icon is breaking the file. The interesting part is they all look like they're working but I'm getting some gross console errors. Here's a screenshot: https://screencast.com/t/nZr2RIOkhL

After trying a ridiculous amount of things because we need to release right meow, I have quite a few package.json files. Here's what that now looks like:

"@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-brands": "^5.0.13", "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/fontawesome-svg-core": "^1.2.0-14", "@fortawesome/free-solid-svg-icons": "^5.1.0-11", "@fortawesome/react-fontawesome": "0.1.0-11",

Any advice ASAP would be super helpful so we can get rolling.

Thanks in advance!

[robmadole]

@hollyewhite it looks like you are mixing the older stuff and the newer stuff:

@fortawesome/fontawesome, @fortawesome/fontawesome-free-brands, @fortawesome/fontawesome-free-solid are all older packages and not compatible with the development version (pre-release) you are using ("@fortawesome/react-fontawesome": "0.1.0-11")

So first up, make sure you have read UPGRADING.md.

Next step is to create a https://stackblitz.com or similar (codesandbox.io) reproduction of the issue you are seeing. There is a lot of missing code in the example you gave :)

Once you have a reproducible test case I'll be glad to take a look.

[glemiere]

@robmadole why removing the default export ?

[robmadole]

From UPGRADING.md @glemiere :

• https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
• https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

[Shywim]

One can wonder why IDE behavior is leaking into the code of a library. I mean, other IDE like Webstorm handle what these articles point out as a problem in VSCode. I also wonder how tree shaking was not working (according to your articles) when we used `import faUsers from '@fortawesome/fontawesome-free-solid/faUsers' since there was only one import from one file.

So now, I have to conform to the way this library name its components (or use export { ... as ... } which is more verbose) on top of having to go through all my fontawesome imports in my codebase to surround them with { } while you could just make named import AND default import available...

[jfbloom22]

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?

[robmadole]

@jfbloom22 can you point out a specific example? We've tried hard to keep everything in sync but maybe we've missed something.

@Shywim we did our best to support TypeScript and to follow best practices. We made the call to get rid of default exports because we experienced so many problems (nothing to do with VSCode but with compilers and bundling tools). Using import faUsers from '@fortawesome/fontawesome-free-solid/faUsers is not tree-shaking; that's a sub-module import and it's always worked. Sorry the upgrade process was a burden for you.

[jfbloom22]

@robmadole it looks like I had version 0.0.20 installed and so obviously I had a lot of trouble following the documentation currently on master branch. I should have looked here?: https://github.com/FortAwesome/react-fontawesome/tree/0.0.18.
Several releases have been pushed to NPM since then, including going to the 0.1.0 range, but it is not clear to me without actually trying it, what documentation I should use if I ran npm i --save @fortawesome/react-fontawesome today?

[stiofand]

The free font-awesome instructions for vue and vue-cli with vue-fontawesome dont work at all either