search

pd4d10 / vite-plugin-svgr

Vite plugin to transform SVGs into React components
MIT License
570 stars 55 forks source link

How do you inline svgs? #85

Open marcofugaro opened 1 year ago

marcofugaro commented 1 year ago

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
nice-wwming commented 1 year ago

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 commented 1 year ago

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

marcofugaro commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

allicanseenow commented 6 months ago

Does this mean we can't inline svgs?

allicanseenow commented 6 months ago

Seems the online option is to set assetsInlineLimit: 0 in vite.config.js if I want to line an svg inside url

Another solution is mentioned here https://github.com/vitejs/vite/issues/15986#issuecomment-1954386523