https://github.com/danielbayley/svgo-plugin-chameleon

Simple @svg​o plugin to change fill and stroke attribute colors.
https://github.com/danielbayley/svgo-plugin-chameleon

attributes color colors colour colours css npm npm-module npm-package npmjs optimisation optimization svg svgo svgo-plugin

Last synced: about 1 month ago
JSON representation

Simple @svg​o plugin to change fill and stroke attribute colors.

• Host: GitHub
• URL: https://github.com/danielbayley/svgo-plugin-chameleon
• Owner: danielbayley
• License: mit
• Created: 2023-09-28T22:28:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-12T22:27:19.000Z (about 1 year ago)
• Last Synced: 2024-09-29T15:42:19.335Z (about 2 months ago)
• Topics: attributes, color, colors, colour, colours, css, npm, npm-module, npm-package, npmjs, optimisation, optimization, svg, svgo, svgo-plugin
• Language: JavaScript
• Homepage: https://github.com/svg/svgo#readme
• Size: 61.5 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


_Chameleon_

===========

Simple _[SVGO]_ [plugin] to change [`fill`] and [`stroke`] [attribute] colors.

Particularly useful for processing icons.

## Install

~~~ sh

pnpm add @danielbayley/svgo-plugin-chameleon --save-dev

~~~

API

---

This package is _[ESM]_ [only], and so [requires] _[Node]_ [`>=`]

[`14.16`] and must be [`import`]ed instead of [`require`]d:

~~~ json5

// package.json

"type": "module",

"engines": {

  "node": ">=14.16"

},

~~~

~~~ js

import { readFile, writeFile } from "node:fs/promises"

import { optimize } from "svgo"

import { chameleon } from "@danielbayley/svgo-plugin-chameleon"

const path = "input.svg"

const svg = await readFile(path, "utf-8")

~~~

~~~ svg

  

  

  

~~~

Passing `fill:` or `stroke:` as [`params`] will forcibly override those [attribute]s:

~~~ js

const { data } = optimize(svg, {

  path,

  //js2svg: { pretty: true, indent: 2 },

  plugins: [{

    ...chameleon,

    params: {

      fill: "none"

      stroke: "black"

    }

  }]

})

writeFile("output.svg", data)

~~~

~~~ svg

  

  

  

~~~

An `auto:` property will instead allow the algorithm to automatically find the first

existing [`stroke`] or [`fill`] attribute not already set to `none`, and override it with

the corresponding given value. Should neither exist, it will default to adding a `fill`:

~~~ js

optimize(svg, {

  plugins: [{

    ...chameleon,

    params: { auto: "currentcolor" }

  }]

})

~~~

~~~ svg

  

  

  

~~~

A value of [`currentcolor`] will inherit from the context of the [SVG].

This plugin currently works on the root [``] [element] only,

and does not affect any [``] element, or [`style`] attributes.

License

-------

[MIT] © [Daniel Bayley]

[MIT]:                LICENSE.md

[Daniel Bayley]:      https://github.com/danielbayley

[svg]:                https://developer.mozilla.org/docs/Web/SVG

[element]:            https://developer.mozilla.org/docs/Web/SVG/Element

[`<svg>`]:            https://developer.mozilla.org/docs/Web/SVG/Element/svg

[`<style>`]:          https://developer.mozilla.org/docs/Web/SVG/Element/style

[attribute]:          https://developer.mozilla.org/docs/Web/SVG/Attribute

[`style`]:            https://developer.mozilla.org/docs/Web/SVG/Attribute/style

[`fill`]:             https://developer.mozilla.org/docs/Web/SVG/Attribute/fill

[`stroke`]:           https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke

[`currentcolor`]:     https://gomakethings.com/currentcolor-and-svgs

[svgo]:               https://github.com/svg/svgo#readme

[plugin]:             https://github.com/svg/svgo#configuration

[`params`]:           https://github.com/svg/svgo#custom-plugin

[node]:               https://nodejs.org

[requires]:           https://docs.npmjs.com/cli/v9/configuring-npm/package-json#engines

[`>=`]:               https://docs.npmjs.com/cli/v6/using-npm/semver#ranges

[`14.16`]:            https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V14.md#14.16.0

[ESM]:                https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules

[only]:               https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[`import`]:           https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import

[`require`]:          https://nodejs.org/api/modules.html#requireid