Query params to customize icons add the `.svelte` suffix in markup in Svelte 5

[PetrLaskevic]

Describe the bug

<script lang="ts">
    import FolderIcon from "virtual:icons/material-symbols/files?width=24px&height=24px";
</script>
<FolderIcon></FolderIcon>

The result of npm run dev:

The interesting portion is height="24px.svelte" The suffix should not be there.

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
~icons/material-symbols/files:1:307
1  |  <script>const{...p}=$props()</script><svg viewBox="0 0 24 24" width="24px" height="24px.svelte"  {...p}><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18v-3h9q.825 0 1.413-.587T13 13V4h7q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm-2-6V8q0-.825.588-1.412T4 6h6zm3.825-1L11 7.825V13z"/></svg>
   |                                                                                                                                                                                                                                                                                                                    ^

Please tell me if I should post any more config files (tsconfig.json, svelte.config.js, vite.config.js etc). The whole repo if you want to see any config files.

Reproduction

See snippet I provided.

System Info

System:
    OS: Linux 6.8 Linux Mint 22 (Wilma)
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 2.52 GB / 13.51 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm
    pnpm: 10.10.0 - ~/.nvm/versions/node/v22.16.0/bin/pnpm
  Browsers:
    Chromium: 138.0.7204.168

Used Package Manager

npm

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guide.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [x] The provided reproduction is a minimal reproducible of the bug.

[PetrLaskevic]

When I don't use query parameters, and simply do import FolderIcon from "virtual:icons/material-symbols/files";, it does work

[PetrLaskevic]

Alternatively import FolderIcon from "~icons/material-symbols/files"; also works

[PetrLaskevic]

I feel the most robust solution would be to strip .svelte off import URLs, if query parameters are present. Alternatively, after parsing these parameters, remove .svelte from the end. Basically if "24px.svelte" is parsed, remove the .svelte from it.

Some alternative might be fiddling with Svelte to not place .svelte implicitly everywhere, but for user friendliness, I think the first approach would be better, as other tools in the project might rely on those implicit suffixes.

[userquin]

you cannot use query params without raw compiler, why do you need query params if you can just add the width/height in the marckup? <FolderIcon width="24px" height="24px"></FolderIcon> and <FolderIcon width="48px" height="48px"></FolderIcon>

[PetrLaskevic]

@userquin I was trying to follow https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#use-raw-compiler-from-query-params example for Vue in Svelte. I figured that it might work and it almost does.

Your workaround does work, thanks!

[userquin]

you need the raw entry => ?raw&....

[PetrLaskevic]

@userquin Are you suggesting import FolderIcon from "virtual:icons/material-symbols/files?raw&width=24px&height=24px";

That does not work, for both <FolderIcon></FolderIcon> or <FolderIcon/> I get

client.js?v=6ed6c353:331 Uncaught (in promise) TypeError: FolderIcon is not a function

	in <unknown>
	in +layout.svelte
	in root.svelte

[userquin]

can you try with import FolderIcon from "virtual:icons/material-symbols/files?raw=true&width=24px&height=24px";?

[PetrLaskevic]

@userquin For import FolderIcon from "virtual:icons/material-symbols/files?raw=true&width=24px&height=24px"; I get the same:

18:09:30.412 client.js?v=6ed6c353:331 Uncaught (in promise) TypeError: FolderIcon is not a function

	in <unknown>
	in +layout.svelte
	in root.svelte

    at $.add_svelte_meta.componentTag (+page.svelte:83:4)
    at Module.add_svelte_meta (chunk-NLTPE4NZ.js?v=6ed6c353:520:12)
    at _page (+page.svelte:83:4)
    at chunk-XN6QPW2O.js?v=6ed6c353:324:58
    at update_reaction (chunk-NLTPE4NZ.js?v=6ed6c353:2780:23)
    at update_effect (chunk-NLTPE4NZ.js?v=6ed6c353:2911:21)
    at create_effect (chunk-NLTPE4NZ.js?v=6ed6c353:2310:7)
    at branch (chunk-NLTPE4NZ.js?v=6ed6c353:2459:10)
    at chunk-XN6QPW2O.js?v=6ed6c353:318:17
    at update_reaction (chunk-NLTPE4NZ.js?v=6ed6c353:2780:23)