How to inline SVG files in your Bridgetown site

A short tutorial on how to use bridgetown-svg-inliner to inline SVG assets on your Bridgetown website.

Previously this post was about andrewmcodes/bridgetown-inline-svg but that plugin has since been put into maintenance mode in favor of this MIT licensed library by Ayush Newatia.

Prerequisites

This tutorial assumes that you already have a Bridgetown website up and running. If you don’t, check out Bridgetown’s Quick Instructions for instructions on how to generate your first site.

Install

Run the following command to install the plugin in your site:

bundle add "bridgetown-svg-inliner" -g bridgetown_plugins
bundle add "bridgetown-svg-inliner" -g bridgetown_plugins

Usage

Bridgetown creates an images folder by default at src/images, which you can use to store your SVG assets or you can create your own folder like assets, just make sure it is nested under src/.

For this tutorial, I used the annotation outline icon from Heroicons.

Basic Usage

Create a SVG called icon.svg at src/images/icon.svg and call it using the Ruby helper or Liquid tag:

<!-- ERB -->
<%= svg "/images/icon.svg" %>
<!-- ERB -->
<%= svg "/images/icon.svg" %>

<!-- Liquid -->
{% svg "/images/icon.svg" %}
<!-- Liquid -->
{% svg "/images/icon.svg" %}

This will inline the SVG as is in your file once the page renders.

Advanced Usage

You can pass options to the plugin which will then be applied to the resulting element. If it already exists in your SVG file, it will be overwritten.

For example, this snippet:

<!-- ERB -->
<%= svg "/images/icon.svg", class: "foo", width: "100%" %>
<!-- ERB -->
<%= svg "/images/icon.svg", class: "foo", width: "100%" %>

<!-- ERB -->
{% svg "/images/icon.svg", class: "foo", width: "100%" %}
<!-- ERB -->
{% svg "/images/icon.svg", class: "foo", width: "100%" %}

will result in the following HTML:

<svg xmlns="http://www.w3.org/2000/svg" class="foo" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="100%">
  <!-- ... -->
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="foo" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="100%">
  <!-- ... -->
</svg>

Reference

• ayushn21/bridgetown-svg-inliner