SVGs are not rendering on lates vite 6

[Pratap-Thunga]

Describe the bug

I am trying render an SVG in Vite + React application. There is only probelm with one SVG that in vite 6. In vite 5 same svg is working did anyone faced this issue ?? Help would be appreciated.

Reproduction

NA

Steps to reproduce

No response

System Info

Chrome, Edge, Safari

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.
• 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.

[github-actions]

Hello @Prathap-Thunga. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[ArnaudBarre]

How are rendering this SVG? They are multiple ways to do so, it would be simpler for us to fix the issue if you can reproduce it on stackblitz. The default template in the comment above does render two svg correctly (one from public, one relative import)

[Pratap-Thunga]

How are rendering this SVG? They are multiple ways to do so, it would be simpler for us to fix the issue if you can reproduce it on stackblitz. The default template in the comment above does render two svg correctly (one from public, one relative import)

Hello @ArnaudBarre , Here is the link where you can reproduce. If you hover on the text React Icon its is displaying react icon as a cursor but if we hover on the custom text its not displaying the custom icon and both the SVGs are rendering normally but if we render them as a cursor icon react icon is working but my custom icon is not working. Use the below link to reproduce the issue.

link - https://stackblitz.com/edit/vitejs-vite-afda43gn?file=src%2FApp.jsx

[hi-ogawa]

Inline svg seems broken for inline style style={{ cursor: `url(${icon}) 16 16, auto` }}, but this was already the case on Vite 5 build. In Vite 6, svg can be inlined both dev and build, so it just got broken in both cases vitejs/vite#18581. This is an intended change for dev/build consistency, and you can now use ?no-inine to enforce file asset vitejs/vite#15454. Here is an updated example:

https://stackblitz.com/edit/vitejs-vite-afda43gn?file=src%2FApp.jsx

import icon from './assets/icon.svg?no-inline';

[Pratap-Thunga]

I tried using ?no-inline which didn't worked for me. But wrapping up the URL in double quotes solved my problem. I tried searching everywhere but didn't find correct solution posting it here so it will be useful for others.
style={{ cursor: url("${icon}") 16 16, auto }}