Icon: support icons that are available in Fomantic UI

[ctoppel]

Feature Request

Update FontAwesome Icons so that the latest icons are supported

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

This cannot be done only on our side as we don't handle CSS in this repo. If you need the latest version of FontAwesome I suggest to use Fomantic UI as they include FA 5.13.0.

With icons that are not present in Icon.propTypes you may get a warning, to solve it you can use <Icon className="ICON_NAME" /> instead.

I am tagging this issue as a compat with Fomantic UI. However, not sure about the implementation yet.

[kusmierz]

Partially it could be solved by changing SemanticICONS type to an interface. We could use Declaration Merging to add new icons (at least for TS)... Speaking of CSS, I'm using fomantic's CSS with https://github.com/Semantic-Org/Semantic-UI-React with no single issue.

[ctoppel]

Thanks for getting back to me on this issue. I would love to be able to use Formantic UI, but as my project uses React, I have to stay away from jQuery. I have implemented the Formantic UI styles successfully, but unfortunately it doesn't help with the use of the new Icons directly. We are not using TS, but I will see if I can do something along the lines of what @kusmierz suggested.

[layershifter]

I have implemented the Formantic UI styles successfully, but unfortunately it doesn't help with the use of the new Icons directly.

But a workaround with className works, correct?

[callain]

Adding a className works indeed. 👍

Maybe you can just update the list of Icons once in a while ? It seems it was generated.

Semantic-UI-React/src/lib/SUI.js

Lines 61 to 62 in 40903c2

	// Generated from:
	// https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/components/icon.css

[brianespinosa]

Maybe you can just update the list of Icons once in a while ?

I think the problem with updating that list is not all recommended ways of consuming CSS with SUIR have the most up to date FontAwesome icons. Some of them still only support the icon list that is currently defined for the name prop. If we updated that list for the most recent available fonts, we are going to give some users a false impression that those icons are available from all recommended style solutions.

If someone is savvy enough to be consuming CSS in a more advanced way than just using the baseline SUI CSS files without changes, it is probably still best to use the className workaround to avoid the prop-type errors.

@layershifter if we are still relying on SUI as our source of truth... I think we close this? If I recall, there was also a performance hit from using the name prop in a long list of rendered items due to having to iterate over that list to validate on each item. I do not recall if that edge case was ever solved. Should not be an issue in production.