No release in over a year
Liquid and ERB helper for Bridgetown to inline SVG files within HTML
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

>= 1.2.0, < 2.0
 Project Readme

Bridgetown SVG Inliner

Tests Gem Version

A Bridgetown plugin that provides a liquid tag and ERB helper to inline SVG files within the HTML markup.

Installation

Run this command to add this plugin to your site's Gemfile:

$ bundle add "bridgetown-svg-inliner"

Initialize it in your config/initializers.rb file.

Bridgetown.configure do |config|
  # ...

  init :"bridgetown-svg-inliner"
end

Usage

This plugin provides an svg tag in Liquid and an svg helper in ERB or other Tilt based templating langugages.

<!-- Liquid -->
{% svg "/assets/icons/thumbs-up.svg" %}
<!-- ERB -->
<%= svg "/assets/icons/thumbs-up.svg" %>
<!-- Serbea -->
{%= svg "/assets/icons/thumbs-up.svg" %}

Attributes

You can pass in attributes that you'd like to include on the svg tag in the HTML output.

<!-- Liquid -->
{% svg "/assets/icons/thumbs-up.svg", class: "icon" %}
<!-- ERB -->
<%= svg "/assets/icons/thumbs-up.svg", class: "icon" %>
<!-- Serbea -->
{%= svg "/assets/icons/thumbs-up.svg", class: "icon" %}
<!-- Output -->
<svg class="icon">...</svg>

Variables

Liquid variables

You can use Liquid variables by enclosing them in double braces ({{ }})

<!-- Liquid -->
{% assign svg_file = "thumbs-up" %}
{% assign svg_class_list = "icon icon--small" %}
{% svg "/assets/icons/{{ svg_file }}.svg", class: "{{ svg_class_list }}" %}

ERB variables

You can use ERB variables.

<% svg_file = "thumbs-up.svg" %>
<% svg_class_list = "icon icon--small" %>
<%= svg "/assets/icons/" + svg_file, class: "svg_class_list" %>

Serbea variables

You can use Serbea variables.

{% svg_file = "thumbs-up.svg" %}
{% svg_class_list = "icon icon--small" %}
{%= svg "/assets/icons/" + svg_file, class: "svg_class_list" %}

Testing

  • Run bundle exec rake test to run the test suite
  • Or run script/cibuild to validate with Rubocop and Minitest together.

Contributing

  1. Fork it (https://github.com/ayushn21/bridgetown-svg-inliner/fork)
  2. Clone the fork using git clone to your local development machine.
  3. Create your feature branch (git checkout -b my-new-feature)
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

License

Bridgetown SVG Inliner is released under the MIT License.

Copyright © 2023 Ayush Newatia