Is there any way to add tailwind styles to the imported svg components.

[0x2f0]

I was using the svgr for webpack and it offered a feature where you could add className to the imported svg component to style it. For example:

import Svg from "/assets/svg.svg";

const styledSvg = (classname) => {
    <Svg className={classname} />
} 

And it worked when passing the tailwind styles but unfortunately, the vite-plugin-svgr doesnot work. I found out that it can expand the native svg properties such as fill.

Is there any way to make it work? Thank you!! I would love to be pointed towards the correct direction or documentation.

[rory-ferguson]

Perhaps you need to import the SVG as a react component

import Svg from "/assets/svg.svg?react";

[0x2f0]

@rory-ferguson thanks for the answer,

The real problem was that I was not able to change the color of the svg icon that I copied from iconify and was changing the fill of the icon. And later found out it works when I change the text-colorof the icon.

So, I am closing this issue.

[arunpt]

@sarojregmi200 Hi, did you find any solution for this?

[0x2f0]

@arunpt svgr already takes in the class name as they are converted to components so, my problem was I was not able to change the color of the svg but I later found out text color was the property that changed the color in my case.

I think there was no problem with the plugin or the implementation. What are the problems, that you are having?