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.
Copyright © 2023 Ayush Newatia