# svgo-plugin-add-classes-to-colors

> SVGO plugin that add corresponding class to element that has specific colors.

Latest version **1.2.0** (published 2022-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install svgo-plugin-add-classes-to-colors
pnpm add svgo-plugin-add-classes-to-colors
yarn add svgo-plugin-add-classes-to-colors
bun add svgo-plugin-add-classes-to-colors
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-05-22 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jiajun Chen |
| Maintainers | tychenjiajun |
| Keywords | svgo, svgo-plugin, svg |

## Links

- npm: https://www.npmjs.com/package/svgo-plugin-add-classes-to-colors
- Repository: https://github.com/tychenjiajun/svgo-plugin-add-classes-to-colors
- Homepage: https://github.com/tychenjiajun/svgo-plugin-add-classes-to-colors#readme
- Issues: https://github.com/tychenjiajun/svgo-plugin-add-classes-to-colors/issues
- npm.io page: https://npm.io/package/svgo-plugin-add-classes-to-colors

## Dependencies (1)

- [svgo](https://npm.io/package/svgo.md) ^2.8.0

## Recent versions

- 1.2.0 (latest) — 2022-05-22
- 1.1.0 — 2022-05-15
- 1.0.1 — 2022-05-12
- 1.0.0 — 2022-05-12

## README

# svgo-plugin-add-classes-to-colors

[![GitHub license](https://img.shields.io/github/license/tychenjiajun/svgo-plugin-add-classes-to-colors)](https://github.com/tychenjiajun/svgo-plugin-add-classes-to-colors/blob/main/LICENSE)
[![npm](https://img.shields.io/npm/dw/svgo-plugin-add-classes-to-colors)](https://www.npmjs.com/package/svgo-plugin-add-classes-to-colors)

Add corresponding class to element that has specific colors.

## Install

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

## Usage

```js
// 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

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

to

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

## More Configs Example

```js
// 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

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

to change all the colors of SVG in your page.

---
_Source: https://npm.io/package/svgo-plugin-add-classes-to-colors · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._