React-fontawesome: render bug

[yocmen]

Hi, i import my fontawesome-all.js with a script tag on the head, then in my react component import the reac-fontawesome, all work grate but fails the render if i have a conditional to show different icons, in my deafult state i have the save icon, then on saving mode i have a spinning cog, (that works good) but when my saving status is false again my text button change correctly but the icon remains with the cog...

<button className="btn btn-primary" disabled={myProps.working} onClick={this._handleClick}>{myProps.working ? <span><FAIcon icon="cog" className="icon-spin-3x icon-1-5x icon-middle" />&nbsp;Please wait...</span> : <span><FAIcon icon="save" className="icon-1-5x icon-middle" />&nbsp;{myProps.text ? myProps.text : 'SAVE'}</span>}</button>

default (saving status false) : save -> works
saving status true : cog -> works
default again (saving status false) : still the cog icon

maybe im missing some thing, thanks in advance.

[rheinheimer]

I have the same issue, with a different icon of course. First render is correct. First re-render is correct. First re-re-render doesn't work. In my case, I'm toggling between folder and folder-open:
<FontAwesomeIcon icon={active ? faFolderOpen : faFolder}/>

[robmadole]

I'm trying to reproduce this: https://codesandbox.io/s/2vx611pk2j

Can anyone provide an example I can see this behavior?

[yocmen]

I tested a lot and the issue is when u use the external fontawesome-all.js on your html... if i remove it from my index.html the react component render good.

But, i need to put it on my index.html, so i dont know what to do.

Edit: ok, after some test, it works only if you deferred the script... so is mandatory to put 'defer' param on the script tag. but if i put the defer param i lost the icons on my app.

Edit2: some how the icons on my app works if i dont use it on react with defer, if i iimport FontAwesomeIcon from '@fortawesome/react-fontawesome'; then all broke again.

[rheinheimer]

Including defer worked! Thanks @yocmen. No other issues for me related to this.

[yocmen]

no problem, glad for u, in my case the defer attribute dont work, it work on the react component but i lost all my icons on my app (html)

[rheinheimer]

Actually, me too now. There seems to be a fundamental conflict between using FontAwesomeIcon and using the <i> tag. Not sure why that is, but my solution is basically to convert all icons to the react component version. This should work, except for the non-React bits of my app, where I'll need to fall back on a different icon set (Blueprint js, FWIW - great icon set for data-centric apps).

[mlwilkerson]

I suspect that this is related to the auto replace functionality. We have a PR in our private repo (#188). I'm turning my attention to reviewing and releasing that soon at which time I hope @yocmen and/or @rheinheimer might be willing to try out a pre-release and provide feedback.

[mlwilkerson]

Related to #188 in our private repo is #51 in this one.

[yocmen]

i removed the 0.0.17 and add the no-no-auto branch... compile it (with no extra config) and dont work.. still the render bug.... :(

[mlwilkerson]

We have a PR for the main API library that would have to be merged before you’d see any difference—if that’s in fact the cause.

Sent from my iPhone

[yocmen]

from this one? https://github.com/FortAwesome/Font-Awesome-Pro

[mlwilkerson]

No, sorry.

[robmadole]

I think I may have an idea what this is. I'm working on it right now. #50 also outlines the same basic problem.

[robmadole]

OK, I've uncovered the root cause of this. @mlwilkerson this is going to take a compatibility fix in the main fontawesome lib. I'll try to get to this tomorrow.

[robmadole]

This should be resolved now. Let us know if it's still a problem.

[yocmen]

It works now!!!! really thanks!!!!! awesome job.