{"id":30192053,"url":"https://github.com/jean-tinland/lazy-icon-web-component","last_synced_at":"2026-06-20T12:32:48.136Z","repository":{"id":305827128,"uuid":"1024057641","full_name":"Jean-Tinland/lazy-icon-web-component","owner":"Jean-Tinland","description":"A web component lazy loading icons from individual sprites","archived":false,"fork":false,"pushed_at":"2026-05-27T19:57:21.000Z","size":81,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T21:23:30.659Z","etag":null,"topics":["lazy-icon","lazy-loading","web-components"],"latest_commit_sha":null,"homepage":"","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/Jean-Tinland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-22T06:02:46.000Z","updated_at":"2026-05-27T19:57:24.000Z","dependencies_parsed_at":"2025-07-22T08:16:34.682Z","dependency_job_id":"efce6488-b2fd-492d-81b0-e645e532f8dc","html_url":"https://github.com/Jean-Tinland/lazy-icon-web-component","commit_stats":null,"previous_names":["jean-tinland/lazy-icon-web-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Jean-Tinland/lazy-icon-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jean-Tinland%2Flazy-icon-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jean-Tinland%2Flazy-icon-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jean-Tinland%2Flazy-icon-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jean-Tinland%2Flazy-icon-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jean-Tinland","download_url":"https://codeload.github.com/Jean-Tinland/lazy-icon-web-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jean-Tinland%2Flazy-icon-web-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34570535,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"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":["lazy-icon","lazy-loading","web-components"],"created_at":"2025-08-12T22:09:56.830Z","updated_at":"2026-06-20T12:32:48.131Z","avatar_url":"https://github.com/Jean-Tinland.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lazy-icon-web-component\n\nA web component lazy loading icons from individual sprites.\n\nIt uses the `IntersectionObserver` API to load the icon only when it is in the viewport. If the browser doesn't support this API, icon is loaded immediately.\n\n**Notice: As I am working simultaneously on a lot of projects, things here may seem to move slowly but they are still in progress. I'm always monitoring my notifications and messages, so if you have any questions or want to chat about anything, feel free [to reach out](https://www.jeantinland.com/contact/)!**\n\n## Setup\n\nYou'll need to expose your icons in a distant or local folder.\n\n![Setup](./setup.png)\n\nEach icon must be a well named file containing a `\u003csvg\u003e` sprite with a `\u003csymbol\u003e` identified by the id `icon`.\n\n```html\n\u003c!-- /public/images/icons/arrow-left.svg --\u003e\n\u003csvg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"display: none\"\n\u003e\n  \u003csymbol id=\"icon\" viewBox=\"0 0 24 24\"\u003e\n    \u003cpath\n      d=\"M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11Z\"\n    /\u003e\n  \u003c/symbol\u003e\n\u003c/svg\u003e\n```\n\n## Configuration \u0026 loading\n\nCopy this `lazy-icon.js` script inside your project.\n\nCreate the configuration object then insert bellow a `\u003cscript type=\"module\"\u003e anywhere in your HTML:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- head content --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- body content --\u003e\n\n    \u003cscript\u003e\n      window.lazyIconConfig = {\n        // spriteUrl can be a relative or absolute url\n        spriteUrl: \"/public/images/icons\",\n      };\n    \u003c/script\u003e\n    \u003cscript src=\"./lazy-icon.js\" type=\"module\" async defer\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nNow that the configuration is in place and the script is loaded, you can use the `lazy-icon` custom element anywhere in your project.\n\n```html\n\u003clazy-icon code=\"arrow-left\"\u003e\u003c/lazy-icon\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjean-tinland%2Flazy-icon-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjean-tinland%2Flazy-icon-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjean-tinland%2Flazy-icon-web-component/lists"}