svgo-plugin-add-classes-to-colors

Add corresponding class to element that has specific colors.

Install

npm install --dev svgo-plugin-add-classes-to-colors
# or
yarn add --dev svgo-plugin-add-classes-to-colors

Usage

// svgo.config.js
const addClassesToColors = require('svgo-plugin-add-classes-to-colors');
module.exports = {
  plugins: [
    {
      ...addClassesToColors,
      params: {
        mapping: {
          // [color]: className
          'currentColor': 'tone1',
          '#fff': 'tone2',
        }
      }
    }
  ],
};

will transform

<svg xmlns="http://www.w3.org/2000/svg">
    <g color="#fff"/>
    <g color="currentColor"/>
</svg>

to

<svg xmlns="http://www.w3.org/2000/svg">
    <g color="#fff" class="tone2"/>
    <g color="currentColor" class="tone1"/>
</svg>

More Configs Example

// svgo.config.js
const addClassesToColors = require('svgo-plugin-add-classes-to-colors');
module.exports = {
  plugins: [
    {
      ...addClassesToColors,
      params: {
        mapping: {
          // [color attribute]: { [color]: className }
          fill: {
            '#fff': 'fill--tone1',
          },
          stroke: 'fill' // will add class `fill--tone1` to stroke="#fff"
        }
      }
    }
  ],
};

Why

This will make controlling SVG colors easier. You can write CSS like

.tone1 {
    color: white;
    fill: white;
    stroke: white;
}

to change all the colors of SVG in your page.