{"id":19593068,"url":"https://github.com/thoughtbot/middleman-inline_svg","last_synced_at":"2025-04-27T14:34:05.302Z","repository":{"id":56883624,"uuid":"128838204","full_name":"thoughtbot/middleman-inline_svg","owner":"thoughtbot","description":"Embed SVG documents in your Middleman views","archived":false,"fork":false,"pushed_at":"2021-09-24T16:06:20.000Z","size":28,"stargazers_count":1,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-22T10:31:46.958Z","etag":null,"topics":["middleman","ruby","svg"],"latest_commit_sha":null,"homepage":"https://thoughtbot.com","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thoughtbot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-09T21:53:55.000Z","updated_at":"2020-06-07T04:26:07.000Z","dependencies_parsed_at":"2022-08-20T13:10:54.871Z","dependency_job_id":null,"html_url":"https://github.com/thoughtbot/middleman-inline_svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fmiddleman-inline_svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fmiddleman-inline_svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fmiddleman-inline_svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thoughtbot%2Fmiddleman-inline_svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thoughtbot","download_url":"https://codeload.github.com/thoughtbot/middleman-inline_svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154903,"owners_count":21544571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["middleman","ruby","svg"],"created_at":"2024-11-11T08:38:00.854Z","updated_at":"2025-04-27T14:34:01.912Z","avatar_url":"https://github.com/thoughtbot.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Middleman Inline SVG\n\n[![CircleCI](https://circleci.com/gh/thoughtbot/middleman-inline_svg.svg?style=svg)](https://circleci.com/gh/thoughtbot/middleman-inline_svg)\n\nA [Middleman] extension embed SVG documents in your Middleman views.\n\n[Middleman]: https://middlemanapp.com/\n\n## Installation\n\n1. Add `middleman-inline_svg` to your `Gemfile` and run Bundler:\n\n    ```ruby\n    gem \"middleman-inline_svg\"\n    ```\n\n    ```bash\n    bundle install\n    ```\n\n1. Activate the extension in `config.rb`:\n\n    ```ruby\n    activate :inline_svg\n    ```\n\n## Usage\n\n`middleman-inline_svg` provides an `inline_svg` helper that you can use in your\ntemplates. Using it will inline your SVG document directly into the HTML\nenabling you to style it with CSS and pass in HTML attributes.\n\nGiven the following SVG file named `heart.svg`:\n\n```xml\n\u003csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\nAnd the following code in a Middleman template:\n\n```erb\n\u003c%= inline_svg \"heart.svg\", class: \"icon icon--small\" %\u003e\n```\n\nMiddleman will output the following:\n\n```html\n\u003csvg class=\"icon icon--small\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\nIt's possible to specify a title for the SVG. And any other options passed will\nbe rendered as attributes on the `\u003csvg\u003e` element. Adding a title to your SVG\nwill improve accessibility.\n\n```erb\n\u003c%= inline_svg(\n  \"heart.svg\",\n  role: \"img\",\n  title: \"Like this comment\",\n) %\u003e\n```\n\n```html\n\u003csvg role=\"img\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003ctitle\u003eLike this comment\u003c/title\u003e\n  \u003cpath d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\nUnderscores are translated into hyphens in the output.\n\n```erb\n\u003c%= inline_svg(\n  \"heart.svg\",\n  aria_hidden: true,\n) %\u003e\n```\n\n```html\n\u003csvg aria-hidden=\"true\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003ctitle\u003eLike this comment\u003c/title\u003e\n  \u003cpath d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n```\n\n## Configuration\n\nYou can configure the default attributes/title in the Middleman `config.rb` file\nwhen the extension is activated:\n\n```ruby\nactivate :inline_svg do |config|\n  config.defaults = {\n    role: img,\n  }\nend\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Fmiddleman-inline_svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthoughtbot%2Fmiddleman-inline_svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthoughtbot%2Fmiddleman-inline_svg/lists"}