{"id":19206869,"url":"https://github.com/html-next/svg-icon-optimizer","last_synced_at":"2025-10-04T22:41:25.958Z","repository":{"id":66281339,"uuid":"477489742","full_name":"html-next/svg-icon-optimizer","owner":"html-next","description":"SVG Icon Performance Optimization","archived":false,"fork":false,"pushed_at":"2022-05-19T20:06:56.000Z","size":231,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-09-13T13:09:15.266Z","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/html-next.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-04-03T23:17:39.000Z","updated_at":"2022-11-14T14:23:02.000Z","dependencies_parsed_at":"2023-10-12T06:03:32.240Z","dependency_job_id":null,"html_url":"https://github.com/html-next/svg-icon-optimizer","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"eb5587da9b15cc4241e99ab0703f3f095d6232fc"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/html-next/svg-icon-optimizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fsvg-icon-optimizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fsvg-icon-optimizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fsvg-icon-optimizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fsvg-icon-optimizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/html-next","download_url":"https://codeload.github.com/html-next/svg-icon-optimizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fsvg-icon-optimizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278386122,"owners_count":25978109,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-09T13:17:15.229Z","updated_at":"2025-10-04T22:41:25.939Z","avatar_url":"https://github.com/html-next.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"@html-next/svg-icon-optimizer\n==============================================================================\n\n**SVG Icon Performance Optimization**\n\nThis addon lets ember app's progressively opt in to highly optimized icon\nusage via a combination of embroider, template-only components, and build-time\nplugins.\n\n**TL;DR**\n\n- Put svg icons in your app as template-only components `app/components/icon/**/*.hbs`\n- Use icons in your app as a regular component e.g. `\u003cIcon::Fa::Trashcan /\u003e`\n\n**Optimizations**\n\n- 1. less-repetitive inline-svg usage - which keeps your payloads smaller. You get this just by using icons as components. You don't even need this addon for that \u003c3 !\n- 2. tree-shake unused icons. You get this purely by using embroider for your build, no other configuration required! You don't even need this addon for that \u003c3 !\n- 3. don't ship SVGs as JS code. Using this addon your SVGs will be extracted to `public/assets/component-icons/**/*.svg`. This reduces the JS bundle size and allows for these images to be served from cache. We'll even keep a stable fingerprint for them between builds if they haven't changed. The magic here is `use`, your components are converted into this still tree-shakeable form:\n\n```hbs\n\u003csvg ...attributes xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cuse xlink:href=\"assets/component-icons/fa/trashcan.svg\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\nThis form allows us to re-use SVG images and cache them while retaining the ability to style them inline.\n\n- 4. Automatically convert only the used SVGs into symbols and a sprite. We'll parse your templates and find which icons were actually used, then create a sprite for them. The output from the optimization in step-3 changes to:\n\n```hbs\n\u003csvg ...attributes xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cuse xlink:href=\"assets/component-icon-sprite.svg#fa-trashcan\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v3.24 or above\n* Ember CLI v3.24 or above\n* Node.js v12 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install @html-next/svg-icon-optimizer\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\n[Longer description of how to use the addon in apps.]\n\n\nContributing\n------------------------------------------------------------------------------\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%2Fhtml-next%2Fsvg-icon-optimizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtml-next%2Fsvg-icon-optimizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-next%2Fsvg-icon-optimizer/lists"}