{"id":26068359,"url":"https://github.com/minutebase/ember-inline-svg","last_synced_at":"2025-04-06T02:07:14.088Z","repository":{"id":23811103,"uuid":"27187492","full_name":"minutebase/ember-inline-svg","owner":"minutebase","description":"Ember CLI addon to render SVG images inline","archived":false,"fork":false,"pushed_at":"2023-10-19T11:36:41.000Z","size":2330,"stargazers_count":90,"open_issues_count":29,"forks_count":51,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T04:03:17.364Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minutebase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-26T17:13:16.000Z","updated_at":"2024-04-17T21:15:27.000Z","dependencies_parsed_at":"2024-06-18T13:43:51.532Z","dependency_job_id":null,"html_url":"https://github.com/minutebase/ember-inline-svg","commit_stats":{"total_commits":118,"total_committers":22,"mean_commits":5.363636363636363,"dds":0.7457627118644068,"last_synced_commit":"184104e39250be12278ba5833a35840330ec8b2f"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minutebase%2Fember-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minutebase%2Fember-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minutebase%2Fember-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minutebase%2Fember-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minutebase","download_url":"https://codeload.github.com/minutebase/ember-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246899655,"owners_count":20851898,"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":"2025-03-08T22:25:19.827Z","updated_at":"2025-04-06T02:07:14.070Z","avatar_url":"https://github.com/minutebase.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-inline-svg\n\n[![CI](https://github.com/minutebase/ember-inline-svg/actions/workflows/ci.yml/badge.svg)](https://github.com/minutebase/ember-inline-svg/actions/workflows/ci.yml)\n\nDisplays SVG images inline.\n\n## Compatibility\n\n* Ember.js v3.20 or above\n* Ember CLI v3.20 or above\n* Node.js v12 or above\n\n## Installation\n\n```bash\nember install ember-inline-svg\n```\n\n## Usage\n\n```handlebars\n{{inline-svg \"path/to/file\"}}\n```\n\nThis will display the SVG found at `/public/path/to/file.svg` (see below on how to change this).\n\nYou can specify a class for the element like so:\n\n```handlebars\n{{inline-svg \"my-svg\" class=\"foo\"}}\n```\n\nAlso, you can add/update `\u003ctitle\u003e\u003c/title\u003e` by doing:\n\n```handlebars\n{{inline-svg 'mySVG' title=\"myTitle\"}}\n{{inline-svg 'mySVG' class=\"myClass\" title=\"myTitle\"}}\n```\n\n## Configuring\n\n### SVG Paths\n\nBy default the addon expects to find your SVG images at `/public/`, but you can change this\nby setting the `svg.paths` option in your application's ember-cli-build.js like so:\n\n```javascript\nvar app = new EmberApp({\n  svg: {\n    paths: [\n      'public/images',\n      'app/svgs'\n    ]\n  }\n});\n```\n\n### Optimizing\n\nSVGs are optimized by [svgo](https://github.com/svg/svgo) by default.\n\nYou can configure this by setting the `svg.optimize` options:\n\n```javascript\nvar app = new EmberApp({\n  svg: {\n    optimize: {\n      plugins: [\n        { removeDoctype: false },\n        { removeTitle: true },\n        { removeDesc: true }\n      ]\n    }\n  }\n});\n```\n\nPlease bear in mind that but default we are stripping `title` from any svg with `removeTitle: true`, you can\ndisable it with `removeTitle: false` or alternatively, you can disable every optimization  by doing:\n\n```javascript\nvar app = new EmberApp({\n  svg: {\n    optimize: false\n  }\n});\n```\n\n### Custom Plugins\n\nSVGO [now supports](https://github.com/svg/svgo/commit/1ec50c4a13ecea4c50619cdb3bab4926f6aa53e1) custom plugins.\n\nSee [SVGO's plugins](https://github.com/svg/svgo/tree/master/plugins) for examples on what you can do.\n\nEg, here's how you could strip IDs from all elements:\n\n```javascript\nvar app = new EmberApp({\n  svg: {\n    optimize: {\n      plugins: [\n        {\n          myCustomPlugin: {\n            type: \"perItem\",\n            fn: function(item) {\n              item.eachAttr(function(attr) {\n                if (attr.name === 'id') {\n                  item.removeAttr('id')\n                }\n              });\n            }\n          }\n        }\n      ]\n    }\n  }\n});\n```\n\n## Troubleshooting\n\n##### Atrociously slow build times \u003e:[\n\nLonger build times have two main causes:\n\n* huge `.svg` files\n* lots of `.svg` files\n\nYou can easily run into this when using SVG fonts. By default `ember-inline-svg` processes *all* `.svg` files contained in the `/public` directory. If your fonts live somewhere inside that directory, e.g. `/public/fonts`, these files will be processed, although you will never use them (as inline SVGs).\n\nA quick and easy fix is changing the [`svg.paths` option](#svg-paths) in the configuration. Just explicitly list all directories with images that you want processed by `ember-inline-svg`.\n\nIf the longer build time is not caused by SVG fonts, but by actual SVG images that you actually need, you can [turn off the optimization](#optimization) as a whole or individual plugins to remove or diminish another time-consuming build step.\n\nCurrently the caching does not work as expected. The bug is tracked in [issue #15](https://github.com/minutebase/ember-inline-svg/issues/15). We are positive, that fixing this bug will speed up the builds.\n\n##### No SVG found / The Handlebars template is not rendered\n\nIf you switch to a route that contains an `{{inline-svg}}` helper and nothing is displayed, like really nothing, then this is caused by a failed assertion. Open the Dev Tools and you will see something like this:\n\n```\nError: Assertion Failed: No SVG found for foo/bar/baz.svg\n```\n\nThis happens, when you try to inline a non-exisent or wrongly addressed `.svg` file.\n\n1. Check the spelling.\n2. Make sure that your path is without a leading slash, e.g. `foo/bar/baz.svg` vs. `/foo/bar/baz.svg`.\n3. The path is always absolute and not relative to the current URL.\n4. `public` is not part of the path. So use `foo.svg` instead of `/public/foo.svg`.\n5. If you fiddled around with the [`svg.paths` option](#svg-paths), check the following:\n  - The `.svg` file you're trying to inline is a direct or indirect child of any of the directories listed in `svg.paths`.\n  - If the filename is something like `/public/images/foo/bar.svg` and your `svg.paths` option is set to something like `['public/images']`, you have to address the image with `foo/bar.svg`, instead of the default `images/foo/bar.svg`.\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminutebase%2Fember-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminutebase%2Fember-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminutebase%2Fember-inline-svg/lists"}