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" -g bridgetown_plugins

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" %>

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" %>

<!-- Output -->
<svg class="icon">
  ...
</svg>

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 }}" %}

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.

topofocus/bridgetown-svg-inliner