{"id":24848656,"url":"https://github.com/psephopaiktes/svg-mask-icon","last_synced_at":"2026-02-14T16:05:25.265Z","repository":{"id":246832620,"uuid":"822444724","full_name":"psephopaiktes/svg-mask-icon","owner":"psephopaiktes","description":"Very simple Web Components that uses CSS mask-image. It allows you to specify the color of local SVG icons using CSS, similar to icon fonts.","archived":false,"fork":false,"pushed_at":"2025-03-13T11:42:44.000Z","size":500,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T12:59:46.826Z","etag":null,"topics":["icon-font","icons","web-components","webcomponents"],"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/psephopaiktes.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},"funding":{"github":"psephopaiktes","ko_fi":"psephopaiktes","buy_me_a_coffee":"psephopaiktes","custom":["paypal.me/psephopaiktes"]}},"created_at":"2024-07-01T07:03:55.000Z","updated_at":"2025-03-13T11:42:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"e0cb8d48-8bfc-4079-a998-d9c3748ca606","html_url":"https://github.com/psephopaiktes/svg-mask-icon","commit_stats":null,"previous_names":["psephopaiktes/svg-mask-icon"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/psephopaiktes/svg-mask-icon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psephopaiktes%2Fsvg-mask-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psephopaiktes%2Fsvg-mask-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psephopaiktes%2Fsvg-mask-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psephopaiktes%2Fsvg-mask-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psephopaiktes","download_url":"https://codeload.github.com/psephopaiktes/svg-mask-icon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psephopaiktes%2Fsvg-mask-icon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020905,"owners_count":26086948,"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-14T02:00:06.444Z","response_time":60,"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":["icon-font","icons","web-components","webcomponents"],"created_at":"2025-01-31T12:16:40.375Z","updated_at":"2025-10-14T20:30:39.696Z","avatar_url":"https://github.com/psephopaiktes.png","language":"JavaScript","funding_links":["https://github.com/sponsors/psephopaiktes","https://ko-fi.com/psephopaiktes","https://buymeacoffee.com/psephopaiktes","paypal.me/psephopaiktes"],"categories":[],"sub_categories":[],"readme":"# svg-mask-icon\n\nEnglish | [日本語](README.ja.md)\n\n![Cover](./public/cover.gif)\n\nVery simple **Web Components** that uses [CSS mask-image](https://developer.mozilla.org/docs/Web/CSS/mask-image). It allows you to specify the color of local SVG icons using CSS, similar to icon fonts.\n\n\u003cbr /\u003e\n\n## Table of Contents\n- [Preview](#preview)\n- [Comparison](#comparison)\n- [Installation](#installation)\n- [Usage](#usage)\n\n\u003cbr /\u003e\n\n## Preview\n[Demo Page.](https://psephopaiktes.github.io/svg-mask-icon/)\n\n\u003cbr /\u003e\n\n## Comparison\n\n \\ | \u0026lt;svg-mask-icon\u0026gt; | \u0026lt;img\u0026gt; | Icon Font | \u0026lt;svg\u0026gt; | SVG Sprite \n--:|:--:|:--:|:--:|:--:|:--:\n **CSS Color**         | ✅ | - | ✅ | ✅ | ✅ \n **load `.svg` files** | ✅ | ✅ | - | - | -\n **no build process**  | ✅ | ✅ | - | ✅ | -\n **simple HTML**       | ✅ | ✅ | ✅ | - | -\n **browser translate** | ✅ | ✅ | - | ✅ | ✅\n **A11y label**        | ✅ | ✅ | ✅ | - | -\n\n### \u0026lt;img src=\"icon.svg\" /\u0026gt;\nWhen using the `img` tag, you cannot change the color of the icon using CSS.\n\n### Icon Font\nThis method uses font data like [Material Symbol](https://fonts.google.com/icons) or [Font Awesome](https://fontawesome.com/). It has a complex build process. It has display issues when using browser translation.\n\n### \u0026lt;svg\u0026gt;...\u0026lt;/svg\u0026gt;\nMethod of directly writing the `svg` tag. It can make the HTML complex and inconvenient. Also, it cannot be managed in the form of `.svg` files.\n\n### SVG Sprite\nThis is the method of creating an SVG sprite and specifying it using `\u003cuse\u003e`. It has a complicated build process and is difficult to handle accessibility features like `aria-label`.\n\n\u003cbr /\u003e\n\n## Installation\n```bash\nnpm i svg-mask-icon\n```\nand\n```js\nimport \"svg-mask-icon\";\n```\n\n### or\n1. download [./dist-cdn/svg-mask-icon.js](./dist-cdn/svg-mask-icon.js).\n2. load script in your html.\n```html\n\u003cscript type=\"module\" src=\"svg-mask-icon.js\" defer\u003e\u003c/script\u003e\n```\n\n### or\nload script from CDN.\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/svg-mask-icon/dist-cdn/svg-mask-icon.min.js\"\u003e\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\n## Usage\n\n### basic:\n```html\n\u003csvg-mask-icon src=\"icon.svg\"\u003e\u003c/svg-mask-icon\u003e\n```\nor use Short hand:\n```html\n\u003csvg-icon src=\"icon.svg\" /\u003e\n```\n\n\n### Used as an image with alt text:\n```html\n\u003csvg-icon\n  src=\"icon.svg\"\n\u003eText Label (hidden)\u003c/svg-icon\u003e\n```\nor\n```html\n\u003csvg-icon\n  src=\"icon.svg\"\n  aria-label=\"Text Label\"\n/\u003e\u003c/svg-icon\u003e\n```\nor\n```html\n\u003csvg-icon src=\"icon.svg\" alt=\"Text Label\"\u003e\n```\n\n### Used as a decorative image:\n```html\n\u003csvg-icon\n  src=\"icon.svg\"\n  role=\"presentation\"\n/\u003e\n```\nor No alt text\n```html\n\u003csvg-icon src=\"icon.svg\" /\u003e\n```\n\n→ It will be rendered like this\n```html\n\u003csvg-icon\n  src=\"icon.svg\"\n  role=\"presentation\"\n  aria-hidden=\"true\"\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsephopaiktes%2Fsvg-mask-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsephopaiktes%2Fsvg-mask-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsephopaiktes%2Fsvg-mask-icon/lists"}