Add corresponding class to element that has specific colors.
npm install --dev svgo-plugin-add-classes-to-colors
# or
yarn add --dev svgo-plugin-add-classes-to-colors// 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>// 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"
}
}
}
],
};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.