FEAT: Icon parent wrapper element/component

[bombillazo]

Resolves #719

• Add a feature to auto-wrap icons in a span component with a class name

[bombillazo]

Hey @kamijin-fanta , anyone could take a look at this PR?

[bombillazo]

Any takers? @kamijin-fanta @gorangajic @nolanleung

[kamijin-fanta]

It is unclear if a merge should be performed because the use case is not known. You could write code <span className="wrapper"><FaSearch /></span>. You can also define such a wrapper component.

[bombillazo]

Hey, imagine the case where we wish to apply a custom styling/wrapper to every icon class we import to control their global behavior. How would one currently apply such a wrapper to all icons? Must one create the custom class or wrapper component on every icon instance component used in the code?

That is what this PR tries to address, by incorporating the logic into the icons and context one can globally control the icons.

[kamijin-fanta]

There is still the ability to globally assign class names. Whether it is necessary to wrap components depends on the situation in which they will be used. I would like to know in what cases it is necessary to wrap repeatedly.

[bombillazo]

For UI purposes, we want to wrap any and all react icons we import from react-icon inside a <span /> tag. This is due to us using an existing UI framework that already wraps its own icons in <span /> and applies styling to those via CSS matching span.class-name.

Imagine I use the <FaSearch /> icon in 5 different components. We would need to update every single usage to add a <span /> tag. And that is just 1 icon; we are using dozens of icons in different components and layouts.

[kamijin-fanta]

Think of it as difficult to add features that are not used very often. If such UI frameworks are used a lot in the React community, I would welcome them. However, when merging, the API should accept generic React components, not just span.

[bombillazo]

I can agree with that, I will fix to make the wrapper component generic. 👍

[bombillazo]

Hey @kamijin-fanta, I updated the functionality; please review it to see if it looks better.

[bombillazo]

Hey @kamijin-fanta , the new implementation aligns to using generic React components rather than hardcode the wrapper to span.

[bombillazo]

Hey @kamijin-fanta , any feedback?

[bombillazo]

Hey @kamijin-fanta , any update on if this feature can be merged?

[kamijin-fanta]

If anyone else needs it, please let me know the use case. I will not add a feature that only one person needs.

[bombillazo]

Fair enough, I'll leave it open in case, we've made it work for use using patch-package and it is working perfectly so far.