vite-plugin-svgr icon indicating copy to clipboard operation
vite-plugin-svgr copied to clipboard

Published 20 hours ago • verified publisher icon pd4d10

How do you inline svgs?

Open marcofugaro opened this issue 1 year ago • 7 comments

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: image

marcofugaro avatar Aug 09 '23 14:08 marcofugaro

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.

nice-wwming avatar Aug 21 '23 07:08 nice-wwming

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

mattsputnikdigital avatar Sep 04 '23 20:09 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.

marcofugaro avatar Sep 11 '23 09:09 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.

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.

mattsputnikdigital avatar Sep 11 '23 09:09 mattsputnikdigital

See https://github.com/pd4d10/vite-plugin-svgr/pull/71#issuecomment-1727006445

pd4d10 avatar Sep 20 '23 05:09 pd4d10