In this post I'll describe my experiences with FontAwesome icon set and why I decided to build a WebComponent wrapper around their svg sprites.
tl;dr Source code is available on github
Initially this wasn't a big deal but as I was closing all other topics this one stood on my list, so I decided to give it some more thoughts. First i checked what other options besides css/font-like usage are possible. This led me to the area of SVG sprites which allow embedding any icon inside svg tag using use tag. There are two variations:
SVG sprites seemed like a way to go but they had one drawback - I had to manually insert either path to smaller svg or a symbol id loosing all flexibility of having just css classs
After some more analysis I found out that those sprite id's are the EXACTLY the same as css class, which gave me an idea.
WebComponents with its shadow dom allow proper separation from outside scope with respect to css which disables any unwanted changes in nested element.
Following SVG Sprites documentation on fontawesome docs my initial idea was to embed dynamically generated svg/use pair with proper selector so it can load proper icon. This worked great on chrome... while not on safari - probably because svg creates shadow dom for its children so it was a shadow dom in shadow dom.
So I thought that maybe good-old AJAX will help? Why AJAX (you might ask) - this 2018 and we've long forgotten this ugly very verbose XML syntax. And you'd be right - we do not exchange messages between servers in XML but SVG is an XML and after loading it from server it can be treated just like any other DOM tree with all its great JS semantics - there was only one way to find out :)
And this time it worked!
Below you can find the same icon using fa-icon tag
Having a regular html tags meets my expectations as to how it should behave when inherting from parent node or having custom css class applied to iself, see below:
The code is split into 3 pieces (full version on github)
After implemnting this whole solution I realized that there might be a little problem here - fontawesome xml's are big, very big!
But XML's are also great candidates for huffman coding so I wanted to see how good can it be? Below you can find image for both gzip brotli compression.
In case you'd like serve static assets compressed you can check my other article on Lambda@Edge with brotli encoding
As you can see in this example WebComponents is an easy and elegant solution for encapsulating custom bahviour and allows interactions using web-technologies in a way we're used to and with the help of modern tooling it solve our current problems in a better way.