Inline Fontawesome SVG icons in Jekyll sites

UpdatedFebruary 27, 2021

More from this blog

Build Phoenix Docker Compose development environment easily

I wrote a script called phx-docker-compose-new that can be used instead of mix phx.new to generate a new Phoenix application. Building the development environment for a Phoenix application using Docker Compose is convenient because you can set up not...

Nov 29, 20232 min read

Raspberry Pi TensorFlow Liteで物体検出を楽しむ

この記事について Raspberry Pi、TensorFlow、Pythonのいずれにも詳しくない筆者が、物体検出をやって楽しんだ成果の記録です。 TensorFlow公式の物体検出のサンプルプログラムを実行します。動作環境ボード Raspberry Pi 4 Model B OS Raspberry Pi OS (32-bit または 64-bit) デスクトップ環境カメラ Raspberry Pi カメラモジュール v2 Python Python ...

Apr 23, 20231 min read

Elixir Phoenix 1.6 Esbuild + SCSS

One day I was trying to upgrade one of my Phoenix 1.5 apps to Phoenix 1.6. In that app, I customize Bootstrap styles using SCSS. I want to talk about what I found and stumbled on when setting up SCSS. TIL All explained in Phoenix 1.6 Asset Managemen...

Dec 4, 20213 min read

Elixir Circuits.I2C with Mox

This is written in Japanese. I might convert it to English later, maybe. はじめに Elixirのテストでモックを用意するときに利用するElixirパッケージとして、moxが人気です。Elixir作者のJosé Valimさんが作ったからということもありますが、ただモックを用意するだけではなくElixirアプリの構成をより良くするためのアイデアにまで言及されているので、教科書のようなものと思っています。一言でいうと「その場...

Dec 3, 20213 min read

Elixir Access behaviour

TIL Access supports keyword lists (Keyword) and maps (Map) out of the box, but not structs. There is a reason why Elixir does not implement Access behaviour for structs. Perfer data.key for accessing predefined atom keys of map or struct. Access be...

Nov 14, 20212 min read

Masatoshi Nishiguchi's Blog

62 posts

Get started

Write some script for copying SVG

I think there are so many ways to copy SVG files. At first, I tried:

then I realized it is simple to write my own script for the task. It can be any language but here is an example in Node.js:

#!/usr/bin/env node const fs = require('fs-extra'); const entries = [ { src: 'node_modules/@fortawesome/fontawesome-free/svgs/regular', dest: 'assets/images/vendor/fontawesome-regular', }, { src: 'node_modules/@fortawesome/fontawesome-free/svgs/solid', dest: 'assets/images/vendor/fontawesome-solid', }, ]; entries.forEach(async ({ src, dest }) => { await ensureDistDir(dest); await copyFile(src, dest); }); async function ensureDistDir(dir) { try { await fs.mkdirp(dir); } catch (error) { console.error(error); } } async function copyFile(src, dest) { try { await fs.copySync(src, dest, { errorOnExist: true }); console.log(`Copied files recurresively from: ${src} to: ${dest} `); } catch (error) { console.error(error); } }

The fs-extra NPM package is powerful. It allowed me to do everything I wanted and to write code in a clean way. Now I can do the task by running:

> bin/copy_vendor_images Copied files recurresively from: node_modules/@fortawesome/fontawesome-free/svgs/solid to: assets/images/vendor/fontawesome-solid Copied files recurresively from: node_modules/simple-icons/icons to: assets/images/vendor/simple-icons

Inlining SVG in a Jekyll template

It is as simple as this:

{% svg "assets/images/vendor/fontawesome-solid/arrow-down.svg" %}

which will be compiled to:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"/> </svg>

It inserts an SVG tag when the template is compiled.

Excluding original SVG files from the Jekyll build

Now that SVGs are inlined, my site no longer needs the original SVG files. So I exclude them in my _config.yml file.

exclude: - assets/images/vendor

That's it.

Inline Fontawesome SVG icons in Jekyll sites

More from this blog

Build Phoenix Docker Compose development environment easily

Raspberry Pi TensorFlow Liteで物体検出を楽しむ

Elixir Phoenix 1.6 Esbuild + SCSS

Elixir Circuits.I2C with Mox

Elixir Access behaviour

My Plan

Dependency

Get started

Write some script for copying SVG

Inlining SVG in a Jekyll template

Excluding original SVG files from the Jekyll build

Command Palette

More from this blog

My Plan

Dependency

Get started

Write some script for copying SVG

Inlining SVG in a Jekyll template

Excluding original SVG files from the Jekyll build