Vite doesn't work with static SVG files

[grybykm]

Describe the bug

I'm building a library with React and bundle it with vite.

I have a folder with multiple svg files and I want to import them as a file url.

• Using public folder obviously won't work because client build tools should have an option to decide how to process SVG files.
• inlining svg files is not an option.

I tried these ways:

• putting svg to the public folder new URL('../../public/SVGs/zoom_out.svg?url', import.meta.url).href. This doesn't work because vite replaces the relative path with /. As a result, svg icons will be missing for people who use the library
• using relative path new URL('./SVGs/zoom_out.svg?url', import.meta.url).href. This doesn't work because vite bundles svg files as base64 data. Setting assets file size limit is ignored in vite for some reason.
• using import import svg_zoom_out from './SVGs/zoom_out.svg?url';. This makes dev server not working in Ubuntu, maybe due to ulimit or some other OS specifics. It tries to wrap all the SVGs with javascript and load them all together, finally stucks forever. I think it happens due to 1300 SVG files that I have. There is no way to ignore these files in dev server. It simply stops working if I copy these files into src dir.
• using the same import approach + adding all svg files to rollup exclude. Doesn't work again due to another vue dev server bug: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Fixing any of this issue will solve the problem.

I also tried other alternatives but whichever way I choose something won't work with vite. Either build is corrupted or dev server won't work or stuck.
Additionally, vite overrides some rollup options and it's not possible to use it directly.

I also tried other build tools, ex webpack. Whichever way I choose it works as expected.

As a conclusion, my assumption is that it is a problem with vite itself.

There are multiple issues referencing to similar problems with asset files that are either closed without any answer or ignored.

Is there a way to make vite work with SVG assets at least somehow taking into account they should be referenced as file urls and not converted to base64, corrupted by wrapping in javascript, or have incorrect paths starting from leading slash?

Reproduction

N/A

Steps to reproduce

No response

System Info

"vite": "4.3.9"
Ubuntu 20

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Duplicate of #4454