How do you inline svgs?

[marcofugaro]

The advantage of using svgr is that it inlines the .svg files in the react code. Any way to do this with vite-plugin-svgr?

Currently even the small files are not included:

[nice-wwming]

I also want to solve this problem because there are too many svg in the project, and the size of the picture is very small but it will take up the http request. I hope the author can provide an inline solution.

[mattsputnikdigital]

I believe they are inlined but vite also emits them into the build folder. Are you seeing them being requested?

[marcofugaro]

@mattsputnikdigital yeah you're right, I don't see the HTTP requests to the .svg files, looks like they are actually inlined for me.

[mattsputnikdigital]

@mattsputnikdigital yeah you're right, I don't see the HTTP requests to the .svg files, looks like they are actually inlined for me.

Yes this is an issue I have been trying to resolve. It is easy enough to use noEmit to not let the build include SVG files, but that is all SVG files, not just the ones used as React Components, ones used as background images etc...

I think the plugin needs a bit of an update to support this behaviour.

Im struggling to find the webpack setting in CRA which would do the same thing.

[pd4d10]

See #71 (comment)