Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ayushn21/bridgetown-svg-inliner
Liquid and ERB helper for Bridgetown to inline SVG files in HTML
https://github.com/ayushn21/bridgetown-svg-inliner
bridgetown bridgetown-plugin svg
Last synced: 3 months ago
JSON representation
Liquid and ERB helper for Bridgetown to inline SVG files in HTML
- Host: GitHub
- URL: https://github.com/ayushn21/bridgetown-svg-inliner
- Owner: ayushn21
- License: mit
- Created: 2021-06-16T20:35:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-21T11:49:04.000Z (over 1 year ago)
- Last Synced: 2024-11-01T05:51:36.984Z (3 months ago)
- Topics: bridgetown, bridgetown-plugin, svg
- Language: Ruby
- Homepage:
- Size: 40 KB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bridgetown SVG Inliner
[](https://github.com/ayushn21/bridgetown-svg-inliner/actions/workflows/tests.yml)
[](https://badge.fury.io/rb/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:
```shell
$ bundle add "bridgetown-svg-inliner"
```
Initialize it in your `config/initializers.rb` file.
```ruby
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" %>
```
```serb
{%= 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" %>
```
```serb
{%= svg "/assets/icons/thumbs-up.svg", class: "icon" %}
```
```html
...
```
### 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.
```erb
<% 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.
```serb
{% 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](https://opensource.org/licenses/MIT).
Copyright © 2023 [Ayush Newatia](https://twitter.com/ayushn21)