Skip to content
SVGtoReact

What currentColor changes

The currentColor switch is off by default on the converter. While it is off, a solid fill such as #ff00aa is copied into the component as that color. The word currentColor does not appear. Turn the switch on only when you want the icon to inherit the CSS color of its parent.

What the switch runs

The switch is SVGO's convertColors plugin with currentColor: true. It is not a search-and-replace written for this site, and it is not the Optimize switch. Optimize can stay off while currentColor is on. In that case the file is still sanitized, then this one color plugin runs, then the sanitizer runs again, and then SVGR prints the component.

On a simple path the change is the one people expect:

<path fill="#ff00aa" d="M0 0h10v10z" />

becomes a path whose fill is currentColor. The original hex is gone, so you cannot recover it from the component. fill="none" is left as none. A hex stroke on that same path is rewritten, so an outline icon picks up the parent color on the stroke and keeps a transparent fill.

Gradients

The plugin also rewrites gradient stops. A linear gradient whose stops are #111827 and #115e59 becomes two stops that are both currentColor. The ramp disappears because both ends are the same paint. A shape that pointed at that gradient with fill="url(#bg)" can itself be rewritten to fill="currentColor", so the shape no longer uses the gradient even if the <linearGradient> is still in <defs>.

If Optimize is on at the same time, preset-default can then drop the unused gradient and turn the rectangle into a path of solid currentColor. That is why the switch says it can change gradients. Check the preview before you copy the component. The preview is the sanitized SVG after this pass, drawn in a frame that does not run scripts.

What it does not do

Leaving the switch off does not strip metadata, comments, or editor namespaces. Those belong to Optimize, which is also off by default. currentColor does not remove viewBox, and it does not change attribute names such as stroke-width. Those names are still rewritten to JSX props by SVGR after the color pass, as described in How SVG attributes become JSX props.

The standalone SVG optimizer does not enable this plugin. It runs preset-default only. Shortening #ffffff to #fff can still happen there, because preset-default includes its own convertColors pass without currentColor: true. That shortening is a different edit from inheriting the parent color.