To use svg icons on the site the following technique is used to include the icons in the html.
Essentially it’s one svg file which holds all icons in their own
which then can be referenced by it’s id.
To include the icon, a svg tag with an use statement is used.
I recommend reading this article if you want to go in depth with this method.
While being accessible and performant it isn’t very comfortable to write. So i decided to build a liquid tag to let jekyll do the work.
By invoking the following, the icon with the matching id is placed in the html.
Feel free to copy the liquid tag and use it on your site (gist here).
To install it just drop it in the
_plugin directory in your jekyll project and name the file however you want.