{"id":15007613,"url":"https://github.com/danielbayley/svgo-plugin-chameleon","last_synced_at":"2026-02-25T07:15:15.131Z","repository":{"id":197456642,"uuid":"697987150","full_name":"danielbayley/svgo-plugin-chameleon","owner":"danielbayley","description":"Simple @SVG​o plugin to alter fill and stroke attribute colors.","archived":false,"fork":false,"pushed_at":"2024-11-05T17:07:48.000Z","size":64,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-09T01:02:13.266Z","etag":null,"topics":["attributes","color","colors","colour","colours","css","npm","npm-module","npm-package","npmjs","optimisation","optimization","svg","svgo","svgo-plugin"],"latest_commit_sha":null,"homepage":"https://svgo.dev/docs/plugins","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/danielbayley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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},"funding":{"github":"danielbayley","custom":["https://paypal.me/danieljbayley","BTC 37rdZq4muDVNJh6jCr4XDXf8X2EFKjL3QQ","ETH 0x6248B4349e633969376dA20F9C8577530062BE64"]}},"created_at":"2023-09-28T22:28:24.000Z","updated_at":"2025-05-20T22:02:57.000Z","dependencies_parsed_at":"2023-10-05T04:54:25.292Z","dependency_job_id":"f71fc27b-01f2-47d4-87fd-733d16058b47","html_url":"https://github.com/danielbayley/svgo-plugin-chameleon","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"ae063c6d6db03ae09bfbc6495bd19d49a9a252e3"},"previous_names":["danielbayley/svgo-plugin-chameleon"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/danielbayley/svgo-plugin-chameleon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbayley%2Fsvgo-plugin-chameleon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbayley%2Fsvgo-plugin-chameleon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbayley%2Fsvgo-plugin-chameleon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbayley%2Fsvgo-plugin-chameleon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielbayley","download_url":"https://codeload.github.com/danielbayley/svgo-plugin-chameleon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbayley%2Fsvgo-plugin-chameleon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260093164,"owners_count":22957614,"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":["attributes","color","colors","colour","colours","css","npm","npm-module","npm-package","npmjs","optimisation","optimization","svg","svgo","svgo-plugin"],"created_at":"2024-09-24T19:12:21.265Z","updated_at":"2026-02-25T07:15:09.123Z","avatar_url":"https://github.com/danielbayley.png","language":"JavaScript","funding_links":["https://github.com/sponsors/danielbayley","https://paypal.me/danieljbayley","BTC 37rdZq4muDVNJh6jCr4XDXf8X2EFKjL3QQ","ETH 0x6248B4349e633969376dA20F9C8577530062BE64"],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Chameleon\" src=\"illustration.svg\" align=\"right\" width=\"98vw\"\u003e\n\n_Chameleon_\n===========\nSimple _[SVGO]_ [plugin] to change [`fill`] and [`stroke`] [attribute] colors.\nParticularly useful for processing icons.\n\n## Install\n~~~ sh\npnpm add @danielbayley/svgo-plugin-chameleon --save-dev\n~~~\n\nAPI\n---\nThis package is _[ESM]_ [only], and so [requires] _[Node]_ [`\u003e=`]\n[`14.16`] and must be [`import`]ed instead of [`require`]d:\n~~~ json5\n// package.json\n\"type\": \"module\",\n\"engines\": {\n  \"node\": \"\u003e=14.16\"\n},\n~~~\n~~~ js\nimport { readFile, writeFile } from \"node:fs/promises\"\nimport { optimize } from \"svgo\"\nimport { chameleon } from \"@danielbayley/svgo-plugin-chameleon\"\n\nconst path = \"input.svg\"\nconst svg = await readFile(path, \"utf-8\")\n~~~\n~~~ svg\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"\n  fill=\"#0000\"\n  stroke=\"white\"\n\u003e\n  \u003crect width=\"14\" height=\"14\" x=\"1\" y=\"1\" rx=\"3.5\"/\u003e\n  \u003ccircle cx=\"8\" cy=\"8\" r=\"3\" fill=\"none\"/\u003e\n  \u003ccircle cx=\"12\" cy=\"4\" r=\".1\"/\u003e\n\u003c/svg\u003e\n~~~\nPassing `fill:` or `stroke:` as [`params`] will forcibly override those [attribute]s:\n~~~ js\nconst { data } = optimize(svg, {\n  path,\n  //js2svg: { pretty: true, indent: 2 },\n  plugins: [{\n    ...chameleon,\n    params: {\n      fill: \"none\"\n      stroke: \"black\"\n    }\n  }]\n})\n\nwriteFile(\"output.svg\", data)\n~~~\n~~~ svg\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"\n  fill=\"none\"\n  stroke=\"black\"\n\u003e\n  \u003crect width=\"14\" height=\"14\" x=\"1\" y=\"1\" rx=\"3.5\"/\u003e\n  \u003ccircle cx=\"8\" cy=\"8\" r=\"3\" fill=\"none\"/\u003e\n  \u003ccircle cx=\"12\" cy=\"4\" r=\".1\"/\u003e\n\u003c/svg\u003e\n~~~\n\nAn `auto:` property will instead allow the algorithm to automatically find the first\nexisting [`stroke`] or [`fill`] attribute not already set to `none`, and override it with\nthe corresponding given value. Should neither exist, it will default to adding a `fill`:\n~~~ js\noptimize(svg, {\n  plugins: [{\n    ...chameleon,\n    params: { auto: \"currentcolor\" }\n  }]\n})\n~~~\n~~~ svg\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"\n  fill=\"none\"\n  stroke=\"currentcolor\"\n\u003e\n  \u003crect width=\"14\" height=\"14\" x=\"1\" y=\"1\" rx=\"3.5\"/\u003e\n  \u003ccircle cx=\"8\" cy=\"8\" r=\"3\" fill=\"none\"/\u003e\n  \u003ccircle cx=\"12\" cy=\"4\" r=\".1\"/\u003e\n\u003c/svg\u003e\n~~~\nA value of [`currentcolor`] will inherit from the context of the [SVG].\n\nThis plugin currently works on the root [`\u003csvg\u003e`] [element] only,\nand does not affect any [`\u003cstyle\u003e`] element, or [`style`] attributes.\n\nLicense\n-------\n[MIT] © [Daniel Bayley]\n\n[MIT]:                LICENSE.md\n[Daniel Bayley]:      https://github.com/danielbayley\n\n[svg]:                https://developer.mozilla.org/docs/Web/SVG\n[element]:            https://developer.mozilla.org/docs/Web/SVG/Element\n[`\u003csvg\u003e`]:            https://developer.mozilla.org/docs/Web/SVG/Element/svg\n[`\u003cstyle\u003e`]:          https://developer.mozilla.org/docs/Web/SVG/Element/style\n[attribute]:          https://developer.mozilla.org/docs/Web/SVG/Attribute\n[`style`]:            https://developer.mozilla.org/docs/Web/SVG/Attribute/style\n[`fill`]:             https://developer.mozilla.org/docs/Web/SVG/Attribute/fill\n[`stroke`]:           https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke\n[`currentcolor`]:     https://gomakethings.com/currentcolor-and-svgs\n\n[svgo]:               https://svgo.dev/docs/introduction\n[plugin]:             https://svgo.dev/docs/plugins\n[`params`]:           https://github.com/svg/svgo#custom-plugins\n\n[node]:               https://nodejs.org\n[requires]:           https://docs.npmjs.com/cli/v9/configuring-npm/package-json#engines\n[`\u003e=`]:               https://docs.npmjs.com/cli/v6/using-npm/semver#ranges\n[`14.16`]:            https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V14.md#14.16.0\n[ESM]:                https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules\n[only]:               https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n[`import`]:           https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import\n[`require`]:          https://nodejs.org/api/modules.html#requireid\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielbayley%2Fsvgo-plugin-chameleon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielbayley%2Fsvgo-plugin-chameleon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielbayley%2Fsvgo-plugin-chameleon/lists"}