{"id":13929283,"url":"https://github.com/brob/eleventy-plugin-svg-contents","last_synced_at":"2025-04-10T12:30:32.764Z","repository":{"id":34944172,"uuid":"193010659","full_name":"brob/eleventy-plugin-svg-contents","owner":"brob","description":"An Eleventy plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.","archived":false,"fork":false,"pushed_at":"2023-12-15T08:24:40.000Z","size":1178,"stargazers_count":54,"open_issues_count":20,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-11T15:46:37.039Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-06-21T01:39:32.000Z","updated_at":"2024-02-11T19:14:29.000Z","dependencies_parsed_at":"2024-01-14T18:09:23.349Z","dependency_job_id":null,"html_url":"https://github.com/brob/eleventy-plugin-svg-contents","commit_stats":{"total_commits":28,"total_committers":3,"mean_commits":9.333333333333334,"dds":0.1785714285714286,"last_synced_commit":"b07fc78adda029bf42d622fcd4a64ec6b7d807f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-svg-contents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-svg-contents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-svg-contents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-svg-contents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brob","download_url":"https://codeload.github.com/brob/eleventy-plugin-svg-contents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217123,"owners_count":21066633,"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":[],"created_at":"2024-08-07T18:02:14.100Z","updated_at":"2025-04-10T12:30:32.408Z","avatar_url":"https://github.com/brob.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# eleventy-plugin-svg-contents\n\nAn [Eleventy](https://github.com/11ty/eleventy) universal plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.\n\n## Installation\n\nAvailable on [npm](https://www.npmjs.com/package/eleventy-plugin-svg-contents).\n\n```bash\nnpm install eleventy-plugin-svg-contents --save\n```\n\nOpen up your Eleventy config file (probably `.eleventy.js`) and add the plugin:\n\n```js\nconst svgContents = require(\"eleventy-plugin-svg-contents\");\nmodule.exports = function(eleventyConfig) {\n  eleventyConfig.addPlugin(svgContents);\n};\n```\n\n\n## Usage\n\n### Base usage\nIn your (Nunjucks, Liquid or Handlebars) templates, use the following syntax to grab the contents from any SVG in your project path:\n\n```html\n// nunjucks/liquid\n{{ 'path/to/file.svg' | svgContents }}\n\n// handlebars\n{{{svgContents 'path/to/file.svg' }}}\n```\n\n_**Quick note:** You may need to pass another filter after to have this render as html. In Nunjucks, you'll add `| safe` to the end._\n\n### Adding a class to your SVG\n\nYou can append the `svg` class with the `class` option.\n\n```html\n// Nunjucks\n{{ 'path/to/file.svg' | svgContents(\"extra-class-one extra-class-two\") }}\n\n// Liquid\n{{ 'path/to/file.svg' | svgContents: \"extra-class-one extra-class-two\" }}\n\n// Handlebars\n{{{svgContents 'path/to/file.svg' \"extra-class-one extra-class-two\" }}}\n```\n\n### Using other SVG elements\n\nIf you want to use an element selector other than SVG (or want to select a specific piece of an SVG) you can use an optional second argument to provide a selector for the element in your SVG file. Any selector strings will work (classes, ids, attr, element).\n\nDue to limitations of Liquid and Handlebars, you'll need to have a placeholder string for the optional class name argument.\n\n\n```html\n// Nunjucks\n{{ 'path/to/file.svg' | svgContents(\"\", \"symbol\") }}\n{{ 'path/to/file.svg' | svgContents(\"add-class\", \"#byId\") }}\n\n// Liquid\n{{ 'path/to/file.svg' | svgContents: \"\", \"symbol\" }}\n{{ 'path/to/file.svg' | svgContents: \"add-class\", \"#byId\" }}\n\n// Handlebars\n{{{svgContents 'path/to/file.svg' \"\" \"symbol\" }}}\n{{{svgContents 'path/to/file.svg' \"add-class\" \"#byId\" }}}\n```\n\n### Filters\n\n* `svgContents`: Grabs the xml from an SVG and passes it to your template. Voila! Instant embedded SVG from a file!\n* Future Plan `stripTitle`: A filter to strip the `\u003ctitle\u003e` that often comes with SVGs and can cause havoc with SEO.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-svg-contents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrob%2Feleventy-plugin-svg-contents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-svg-contents/lists"}