Color of svg changed.

[hellomrbigshot]

I have a svg file called menu-more.svg

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="#353A58"/>
<path d="M17 18H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
<path d="M17 25H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
<path d="M17 32H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
</svg>

It used to be like this

But when i import this with the plugin, it shows like this

Color of path changed. How it happens.

[baiye0]

Lastest version stroke is replaced. The new version is not compatible.

[ZuulAndRibbon]

Lastest version stroke is replaced. The new version is not compatible.

I have the same problem.How to change the color

[michaelhue]

While this behavior should probably be opt-in, it's actually quite useful (at least for all my use cases). The currentColor keyword represents the element's color CSS property.

In other words: in order to change the icon color, change the color property of the icon element or any parent element.

[peterdzl]

I agree this should be an opt-in - at present there is no way to leave the SVG stroke colour untouched. Our use case is that we have multiple colours and we define currentColor in the source SVG where we want to make use of CSS overrides.

[digitalacorn]

I added a pull request to make this behaviour optional

https://github.com/vbenjs/vite-plugin-svg-icons/pull/68

[nelsonjd]

Thank you @digitalacorn. I would like to opt-in to this stroke replacing as well. Can we get this merged soon? @anncwb

[inhyuck]

There are other libraries as well. https://github.com/Jevon617/unplugin-svg-component https://github.com/Jevon617/unplugin-svg-component?tab=readme-ov-file#plugin-configuration preserveColor option