Disclaimer: This is my first post in English and it is not my native language. If I've made grammatical mistakes, please kindly tell me how to improve, so I can be better next time !
You can find the french version of this article on my website : https://sylvainmetayer.fr/projet/jekyll-gem-svg-fontawesome/
Need
I wanted to use FontAwesome on my personal website without integrating the whole library and without downside performance. Also, I didn't wanted to use Javascript to display icons.
I've looked for a way to include only the used icon, without placing them one by one, but didn't find any things that suited my need. That's how I've came to create my first jekyll plugin
The documentation is clear enough and helped me a lot.
Realisation
I only want to show icons, so I created 2 Liquid Tags, with parameters.
My first tag get the icon type (regular, solid or brand) and the icon name I want to use. With that, I generate the according svg markup.
Then, I have to generate the svg definition of the icon inside the page.
To do so, I add the icon name and type to the jekyll page metadata, in a simple array.
And with my second tag, I get all of the icons used, per page, and generated the SVG definitions. This mean if a page doesn't use icons, nothing is generated :)
I've first did this with the _plugins directory, because it was easier to debug. When it was working, I decided to package it in a Gem, so it will be available for everyone, if it come to be useful for someone :)
Creating a Gem is easy, the Bundler guide being very helpful.
I've tried to follow Ruby conventions, but as I'm not familiar with this language, I'm open to every suggestions to improve it.
I've release the first version, and now, I've got to fully test it and handle potential errors (missing icons, ...), that are for now.... Handled in a optimistic way :(
Usage
You can use the gem this way.
When you want to print a icon, use the following tag (this one generate the Twitter icon)
{% fa_svg fab.fa-twitter %}
Now, you have to generate the SVG definitions of all your used icons, in every page.
It must be defined only once, in a common part of all your pages (a footer layout is a good choice)
{% fa_svg_generate %}
Then, enjoy your icons :)
As this liquid tag is not on dev.to, nothing is rendered here. You can checkout how it look here
Links
If you want to check out the code, it's on Github here.
To download the Gem, it's over here !
Thanks a lot for reading !
Top comments (0)