{"id":15405178,"url":"https://github.com/fnando/svg_sprite","last_synced_at":"2025-04-17T00:51:14.099Z","repository":{"id":3198090,"uuid":"48714488","full_name":"fnando/svg_sprite","owner":"fnando","description":"Create SVG sprites using SVG links.","archived":false,"fork":false,"pushed_at":"2024-12-05T05:01:04.000Z","size":76,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T05:51:10.352Z","etag":null,"topics":["css","ruby","sprite","svg","svg-sprite"],"latest_commit_sha":null,"homepage":"","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/fnando.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["fnando"],"custom":["https://paypal.me/nandovieira/🍕"]}},"created_at":"2015-12-28T22:02:41.000Z","updated_at":"2024-12-23T12:30:03.000Z","dependencies_parsed_at":"2024-10-19T11:29:07.804Z","dependency_job_id":null,"html_url":"https://github.com/fnando/svg_sprite","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":0.4838709677419355,"last_synced_commit":"8d418c102405c43193ccecf3212d788db6217dc8"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnando%2Fsvg_sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnando%2Fsvg_sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnando%2Fsvg_sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fnando%2Fsvg_sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fnando","download_url":"https://codeload.github.com/fnando/svg_sprite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249294881,"owners_count":21246008,"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":["css","ruby","sprite","svg","svg-sprite"],"created_at":"2024-10-01T16:15:19.639Z","updated_at":"2025-04-17T00:51:14.076Z","avatar_url":"https://github.com/fnando.png","language":"Ruby","funding_links":["https://github.com/sponsors/fnando","https://paypal.me/nandovieira/🍕"],"categories":[],"sub_categories":[],"readme":"# svg_sprite\n\n[![Tests](https://github.com/fnando/svg_sprite/workflows/ruby-tests/badge.svg)](https://github.com/fnando/svg_sprite)\n[![Gem](https://img.shields.io/gem/v/svg_sprite.svg)](https://rubygems.org/gems/svg_sprite)\n[![Gem](https://img.shields.io/gem/dt/svg_sprite.svg)](https://rubygems.org/gems/svg_sprite)\n\nCreate SVG sprites by embedding images into CSS using data URIs. The SVGs are\noptimized using [svg_optimizer](https://github.com/fnando/svg_optimizer).\n\n## Installation\n\n```bash\ngem install svg_sprite\n```\n\nOr add the following line to your project's Gemfile:\n\n```ruby\ngem \"svg_sprite\"\n```\n\n## Usage\n\nLet's assume there's a directory called `images` with the following files:\n\n```console\n$ tree images\nimages\n├── doc-fill.svg\n├── doc.svg\n├── trash-fill.svg\n└── trash.svg\n\n0 directories, 4 files\n```\n\nThe following command will export the SVG sprite and a CSS file with all\ndimensions.\n\n```\n$ svg_sprite generate --input images \\\n                      --css-path sprite/icons.css \\\n                      --sprite-path sprite/icons.svg \\\n                      --name icon\n```\n\nAll SVGs will be combined into one simple file. You can then refer to the SVG by\nusing a link.\n\n```html\n\u003csvg\u003e\n  \u003cuse href=\"sprite/icons.svg#trash\" role=\"presentation\"\u003e\n\u003c/svg\u003e\n```\n\nIf you want to restrict the SVG to the original dimensions, use the export CSS\nfile. Classes are defined using the `--name` name (defaults to `sprite`),\ntogether with the file name. This is an example:\n\n```css\n/*\nThis file was generated by https://rubygems.org/gems/svg_sprite with the\nfollowing command:\n\nsvg_sprite generate --input images --sprite-path sprite/icons.svg --css-path sprite/icons.css --optimize --name icon\n*/\n\n.icon--doc-fill {\n  width: 42px;\n  height: 52px;\n}\n\n.icon--doc {\n  width: 42px;\n  height: 52px;\n}\n\n.icon--trash-fill {\n  width: 48px;\n  height: 53px;\n}\n\n.icon--trash {\n  width: 48px;\n  height: 54px;\n}\n```\n\nBy default, SVGs will keep their stroke and fill colors. You can remove or use\n`currentColor` instead by using `--stroke` and `--fill`.\n\n```\n$ svg_sprite generate --input images \\\n                      --sprite-path sprite/icons.svg \\\n                      --css-path sprite/icons.css \\\n                      --name icon \\\n                      --stroke current-color \\\n                      --fill current-color\n\n$ svg_sprite generate --input images \\\n                      --sprite-path sprite/icons.svg \\\n                      --css-path sprite/icons.css \\\n                      --name icon \\\n                      --stroke remove \\\n                      --fill remove\n```\n\nFinally, all SVGs will be optimized using\n[svg_optimizer](https://github.com/fnando/svg_optimizer). To disable it, use\n`--no-optimize`.\n\n### Using sprites in practice\n\nYou need to embed the final SVG sprite on your HTML page. With Rails, you can\nuse a helper like this:\n\n```ruby\nmodule ApplicationHelper\n  def svg_tag(file)\n    File.open(Rails.root.join(\"app/assets/images\", \"#{file}.svg\")).html_safe\n  end\nend\n```\n\nThen, on your layout file (e.g. `application.html.erb`), you can render it as\n`\u003c%= svg_tag(:icons) %\u003e`.\n\nNow, you need to reference those SVG links by adding `\u003cuse href=\"#id\"\u003e`. You can\ncreate a helper method like this to make things easy.\n\n```ruby\nmodule ApplicationHelper\n  def icon(name)\n    content_tag :svg, class: \"icon icon--#{name}\" do\n      content_tag :use, nil, href: \"##{name}\", role: :presentation\n    end\n  end\nend\n```\n\nYou can render icons by using `\u003c%= icon(:trash) %\u003e`.\n\n### Programming API\n\nTo export both the CSS and SVG files:\n\n```ruby\nrequire \"svg_sprite\"\n\nSvgSprite.call(\n  input: \"./images/icons\",\n  name: \"icon\",\n  css_path: \"./sprite/icons.css\",\n  svg_path: \"./sprite/icons.svg\",\n  optimize: true,\n  stroke: \"remove\",\n  fill: remove\n)\n```\n\n## Maintainer\n\n- [Nando Vieira](https://github.com/fnando)\n\n## Contributors\n\n- \u003chttps://github.com/fnando/svg_sprite/contributors\u003e\n\n## Contributing\n\nFor more details about how to contribute, please read\n\u003chttps://github.com/fnando/svg_sprite/blob/main/CONTRIBUTING.md\u003e.\n\n## License\n\nThe gem is available as open source under the terms of the\n[MIT License](https://opensource.org/licenses/MIT). A copy of the license can be\nfound at \u003chttps://github.com/fnando/svg_sprite/blob/main/LICENSE.md\u003e.\n\n## Code of Conduct\n\nEveryone interacting in the svg_sprite project's codebases, issue trackers, chat\nrooms and mailing lists is expected to follow the\n[code of conduct](https://github.com/fnando/svg_sprite/blob/main/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffnando%2Fsvg_sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffnando%2Fsvg_sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffnando%2Fsvg_sprite/lists"}