Gem: FontAwesome SVG

The need

I wanted to use FontAwesome without bundling the whole library, which is rather heavy.

So I looked for a way to include only the icons I actually use, and that’s how I ended up figuring out how to write a Jekyll plugin.

The documentation is quite thorough, which helped me get up to speed with Jekyll quickly.

Implementation

Since I only wanted to display icons, I went with 2 Tags, which let you define a tag and pass parameters to it.

I pass my first tag the type of icon I want (regular, solid or brand) and its name, and it generates the matching HTML^{note 1} markup for the icon. All that’s left is to fetch the icon’s SVG^{note 2} definition and include it in a namespace at the bottom of the HTML page.

To do this, I add the icons I use to the Jekyll page data, in a simple array.

The second tag is where I collect all the icons used on the page and fetch their SVG definitions.

I first wrote this plugin in the simplest possible way, using Jekyll’s _plugins directory. Once it worked, I wanted to turn it into a Gem published on RubyGems, so that it’s available to everyone, should it be useful to anyone :blush:.

Creating a Gem was fairly easy, as the Bundler guide is very detailed.

I tried to follow Ruby conventions as closely as possible, but since I’m not familiar with the language, I’m open to any feedback to improve the code!

I still need to test it more thoroughly and handle error cases, which are handled rather optimistically for now!

Usage

Here is how to use it:

To display an icon, use the following tag. The code below renders the Twitter icon.

{% fa_svg fab.fa-twitter %}

Here is the result:

{% fa_svg fab.fa-twitter %}

Then add the tag that generates the SVG sprite sheet somewhere shared by every page (usually a footer).

{% fa_svg_generate %}

The need

Implementation

Usage

Links