https://github.com/thoughtbot/middleman-inline_svg
Embed SVG documents in your Middleman views
https://github.com/thoughtbot/middleman-inline_svg
middleman ruby svg
Last synced: about 1 year ago
JSON representation
Embed SVG documents in your Middleman views
- Host: GitHub
- URL: https://github.com/thoughtbot/middleman-inline_svg
- Owner: thoughtbot
- License: mit
- Created: 2018-04-09T21:53:55.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2021-09-24T16:06:20.000Z (almost 5 years ago)
- Last Synced: 2025-04-22T10:31:46.958Z (about 1 year ago)
- Topics: middleman, ruby, svg
- Language: Ruby
- Homepage: https://thoughtbot.com
- Size: 27.3 KB
- Stars: 1
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Middleman Inline SVG
[](https://circleci.com/gh/thoughtbot/middleman-inline_svg)
A [Middleman] extension embed SVG documents in your Middleman views.
[Middleman]: https://middlemanapp.com/
## Installation
1. Add `middleman-inline_svg` to your `Gemfile` and run Bundler:
```ruby
gem "middleman-inline_svg"
```
```bash
bundle install
```
1. Activate the extension in `config.rb`:
```ruby
activate :inline_svg
```
## Usage
`middleman-inline_svg` provides an `inline_svg` helper that you can use in your
templates. Using it will inline your SVG document directly into the HTML
enabling you to style it with CSS and pass in HTML attributes.
Given the following SVG file named `heart.svg`:
```xml
```
And the following code in a Middleman template:
```erb
<%= inline_svg "heart.svg", class: "icon icon--small" %>
```
Middleman will output the following:
```html
```
It's possible to specify a title for the SVG. And any other options passed will
be rendered as attributes on the `` element. Adding a title to your SVG
will improve accessibility.
```erb
<%= inline_svg(
"heart.svg",
role: "img",
title: "Like this comment",
) %>
```
```html
Like this comment
```
Underscores are translated into hyphens in the output.
```erb
<%= inline_svg(
"heart.svg",
aria_hidden: true,
) %>
```
```html
Like this comment
```
## Configuration
You can configure the default attributes/title in the Middleman `config.rb` file
when the extension is activated:
```ruby
activate :inline_svg do |config|
config.defaults = {
role: img,
}
end
```