React-md: [FontIcon] Backward incompatible with Font Awesome v5 ?

[ostrebler]

Hey,

Here is what I observed : The HTML class names on a FontIcon correctly update on prop change when using Material Icons, but not when using Font Awesome.

For instance, this updates when connectionLost changes :

const active = connectionLost ? 'active' : ''
// ...
<FontIcon
  className={ `logo-offline-icon ${ active }` }/>
    power_settings_new
</FontIcon>

This doesn't :

const active = connectionLost ? 'active' : ''
// ...
<FontIcon
  className={ `logo-offline-icon ${ active }` }
  iconClassName='fab fa-stumbleupon'
/>

I use the last version of Font Awesome (v5) and things have slightly changed. They now use <svg>. Can it be that ?

I saw that you render an <i> tag anyway, but it is an <svg> that is actually rendered on the DOM.

<svg class="svg-inline--fa fa-stumbleupon fa-w-16 md-icon logo-offline-icon active" aria-hidden="true" data-prefix="fab" data-icon="stumbleupon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
  <path fill="currentColor" d="M502.9 266v69.7c0 62.1-50.3 112.4-112.4 112.4-61.8 0-112.4-49.8-112.4-111.3v-70.2l34.3 16 51.1-15.2V338c0 14.7 12 26.5 26.7 26.5S417 352.7 417 338v-72h85.9zm-224.7-58.2l34.3 16 51.1-15.2V173c0-60.5-51.1-109-112.1-109-60.8 0-112.1 48.2-112.1 108.2v162.4c0 14.9-12 26.7-26.7 26.7S86 349.5 86 334.6V266H0v69.7C0 397.7 50.3 448 112.4 448c61.6 0 112.4-49.5 112.4-110.8V176.9c0-14.7 12-26.7 26.7-26.7s26.7 12 26.7 26.7v30.9z"></path>
</svg>

Probably some magic in there :

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

My bug may just be a little symptom of a bigger backward compatibility issue, my guess. It seems like the Font Awesome script overwrites the <i> tag, and then React loses all control over it.

Workaround for the className issue : Using a wrapper, and then styling with the appropriate selector :

.wrapper.active > .md-icon {
  ...
}

[mlaursen]

I think I will be a bit slow to fix this one since the changes in FontAwesome after 4.6 lost my interest and I prefer using SVGIcons or material icons personally. I wonder if you would be able to do something like:

<SVGIcon className={classnames('fab fa-stumbleupon logo-offline-icon', { active })} />

if it is an svg problem. I haven't tested or really looked into this yet though.

[Jared-Dev]

How are you importing FontAwesome? The implementation you are describing is their JS based version, but you may be better off using their CSS based option when using this library.

Specifically, you can check the "next" section and my assumption is that you are referencing the /js/all.js while the /css/all.css may not have the issues you are describing. They actually recommend using their React library or the CSS solution when using React.

...or you could be using their React library and none of what I've said could apply to your situation!

[ostrebler]

Yep, I missed that part. It might do the job, I'll give it a try.

[Jared-Dev]

@mlaursen I'm guessing this one can be closed.

[mlaursen]

Let me know if I should re-open if it still doesn't work.