Open source Wizard alternative

[Extarys]

FontAwesome Pro allow to use the Wizard to add modifiers to icons. Sadly, a Kit is required, therefore it doesn't work "offline"/it relies on a CDN.

The result is a single svg with a single path d=

I'm unsure how this is implemented, I'm guessing a JS code copy the modifier icon, make it a bit bigger to remove the excess, then add the modifier icon in it's place. The logic sound simple enough. Implementing this might be something else, I'm unsure.

I would like a modifier property with a list of valid modifier icons (plus,. minus, x, etc).

The downside of this approach is that the script might slow down the page a bit because the icon is computed every time, but if it is used often, we could then simply copy the resulting svg and paste it in a component ourselves.

There is also a way to make the icon duotone, where the original icon is the second paler color, and the modifier is the main colour. But since the component doesn't implement duotone 100% this could wait I suppose.

--
Thanks for this component, I was making a little one myself as a helper before finding this <3