svgo-plugin-add-classes-to-colors
Version:
SVGO plugin that add corresponding class to element that has specific colors.
90 lines (74 loc) • 1.83 kB
Markdown
# svgo-plugin-add-classes-to-colors
[](https://github.com/tychenjiajun/svgo-plugin-add-classes-to-colors/blob/main/LICENSE)
[](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.