Bridgetown SVG Inliner

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

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

License

Bridgetown SVG Inliner is released under the MIT License.

ayushn21 / bridgetown-svg-inliner

readme