How to use symbols?

[boesi]

Is your feature request related to a problem? Please describe.

<FaIcon @icon="check" @fixedWidth={true}} class="..."/>

This is great, but now I want to use this icon as a symbol, because I need it really very often on my page. I can create a symbol easily:

<FaIcon @icon="check" @symbol={true}}/>

But how can I use this icon? I came to this solution:

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-fw my-own-classes">
    <use href="fas-fa-check"/>
</svg>

This works, but has some drawbacks:

• For non-fa-fa-width icons, the viewBox and the required classes are different for each icon
• I didn't check the other options, but I guess they make the code a lot more complicated
• If FontAwesome changes the classes in the future, I'm doomed....

Describe the solution you'd like

<FaIcon @icon="check" @useSymbol={true}}/>

This is easy to use and FaIcon should have all the information to create the code from above.

Describe the alternatives you considered

There was a pull request to add FaStaticIcon, but it was rejected? If this would exist, I just would use it. But for my needs my solution would fit better: I only have two icons, that I use over and over again. Creating these icons as symbols in the right component is a lot easier than creating this sprite file.

And there is already the option @symbol, so in my mind @useSymbol is missing.