You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
So id at class attributes and selectors get prefixed with image_svg?jsx instead of, say, image_svg. And that breaks selectors:
<svg>
<style>
/* before */.st0 { … }/* after */.image_svg?jsx__st0 { … }
</style>
<pathclass="image_svg?jsx__st0"d="…" />
</svg>
Now, that's svgo's bug, ideally they should clean up those file names further, and/or at least escape them when printing the selector (you can have a ? in a class name, you just need to escape it in selectors).
But could this be handled in this plugin too? It looks like the same logic used to remove the query string from the import id when reading the file could be used here too:
Hi there! Thanks for this nice plugin!
First, here's a reproduction for this issue:
https://stackblitz.com/edit/vite-plugin-svgr-query-in-id?file=vite.config.js,src/App.jsx
I'm using
vite-plugin-svgr
configured to use SVGR only for imports using a?jsx
query parameter. This looks like:Which allows import SVG files as either URLs or React components:
I'm using this plugin because it handles this pattern by removing the query string from the import id (unlike
@svgr/rollup
):vite-plugin-svgr/src/index.ts
Lines 36 to 39 in 35f757b
The issue is that the import id is only “cleaned up” that way when reading the file from disk, but not when passed down to SVGR. And SVGR will pass it as
image.svg?jsx
down to SVGO, which doesn't handle query strings either in itsprefixIds
plugin:https://github.com/svg/svgo/blob/73f7002ab614554446e26acf1552c2505448b96f/plugins/prefixIds.js#L13-L20
So id at class attributes and selectors get prefixed with
image_svg?jsx
instead of, say,image_svg
. And that breaks selectors:Now, that's svgo's bug, ideally they should clean up those file names further, and/or at least escape them when printing the selector (you can have a
?
in a class name, you just need to escape it in selectors).But could this be handled in this plugin too? It looks like the same logic used to remove the query string from the import id when reading the file could be used here too:
vite-plugin-svgr/src/index.ts
Line 42 in 35f757b
(There's another usage in the
transformWithEsbuild
function call, but I think this one may need to keep the original import id?)I can make a PR for this if that's helpful.
The text was updated successfully, but these errors were encountered: