In my inaugural post I mentioned that one problem I had encountered while designing this blog was styling the SVG icons. I had grabbed a bunch of the individual icon files from Font Awesome, but because of the way SVGs, CSS and HTML interact, I wasn’t able to colour them directly using CSS
fill properties, and instead had to use
filter properties (which I calculated using this tool, so it wasn’t too much of a hardship).
I also didn’t particularly like that retrieving the icons involved numerous separate requests, nor the visible “pop-in” in Firefox that resulted from having them referenced as external files. The files are tiny, with the request overhead often as large or larger than the files themselves.
A further advantage that I was missing out on by not using Font Awesome as intended was that I couldn’t use their handy
<i> tag shortcuts for specifying the icons to use.
Now, I have taken steps towards solving all of these many problems!
Just use Font Awesome normally you weirdo
Let’s back up a sec and talk about why I didn’t just use Font Awesome as intended in the first place (yes tldr; it is probably because I’m a weirdo).
Doesn’t caching solve this problem?
Well… maybe? In same cases? But not necessarily.
As such, if somebody reads 16 posts on this blog, they will have transferred more data than they would have if I’d used the Font Awesome web fonts. However, if 15 people read one post each and never visit again, the embedded approach comes out way ahead. So it very much depends on the traffic profile of the site, and I don’t think this site is one that people will be checking in on daily.
Embedding also offers other advantages, such as reducing initial load times.
My solution is a pelican plugin that post-processes the generated HTML files and embeds any SVGs it finds, whether specified as
<img> tags or
It also, crucially, sets the
fill attribute of any SVG paths to
currentColor, which causes the fill colour to be taken from the current CSS text colour.
Taking the plugin beyond being merely a static implementation of Font Awesome, it also supports embedding of arbitrary SVG files. This can be achieved either by using
<i> tags with the class
pi to search a custom icon set, or through
<img> tags where the SVG file is referenced by URL.
The plugin probably has loads of rough edges at the moment. I haven’t at all tested if it supports Font Awesome’s more advanced behaviour, or even investigated how those features work, so there is a lot to be done there.
I may explore an approach that would combine the advantages of static generation with the advantages of a separate, cacheable SVG file. My initial thoughts on how to approach this plugin were to combine any referenced SVGs into a single file, and then reference them in the HTML using an SVG
<use> tag. I need to learn a lot more about SVGs to know if that’s even feasible.
In the meantime, it’s serving my purposes already on this site.