Unable to use ?raw in SvelteKit

[microdou]

Describe the bug

Importing icon with ?raw in SvelteKit results in error. This bug appears since version 0.17.4.

To reproduce: Go to the official unplugin-icons SvelteKit playground, which immediately produces error:

[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/mdi/alarm-off:1:571
Error: 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.
    at formatError (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44114:46)
    at TransformContext.error (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44110:19)
    at TransformContext.transform (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:41836:22)
    at async Object.transform (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44404:30)
    at async loadAndTransform (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:55078:29)
    at async instantiateModule (/home/projects/unplugin-unplugin-icons-cmy9zp/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56003:10

Commenting out the affected ?raw imports removes the error.

<script lang="ts">
import SvelteLogo from 'virtual:icons/logos/svelte-icon'
import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
import IconParkAbnormal from 'virtual:icons/icon-park/abnormal'
// import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?raw&width=4em&height=4em'
// import RawMdiAlarmOff2 from 'virtual:icons/mdi/alarm-off?raw&width=1em&height=1em'
</script>

<main>
  <SvelteLogo style="font-size:2em" />
  <br />
  <br />
  <MdiStore24Hour />
  <MdiAlarmOff />
  <IconParkAbnormal />
  <!-- {@html RawMdiAlarmOff}
  {@html RawMdiAlarmOff2} -->
</main>

<style>
  main {
    text-align: center;
  }
</style>

Possible cause: A change introduced in version 0.17.4 likely caused the issue. https://github.com/unplugin/unplugin-icons/compare/v0.17.3...v0.17.4#diff-a2a171449d862fe29692ce031981047d7ab755ae7f84c707aef80701b3ea0c80

Reproduction

https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit

System Info

Output from stackblitz:

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm

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.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github (Open reproduction)

[userquin]

It seems a problem with SvelteKit and the ids, notice the double ??:

resolveId {
  id: '~icons/mdi/alarm-off??raw&width=4em&height=4em',
  normalizedId: '/~icons/mdi/alarm-off??raw&width=4em&height=4em',
  res: '~icons/mdi/alarm-off???raw&width=4em&height=4em',
  query: { '?raw': '', width: '4em', height: '4em' }
}
resolveId {
  id: '~icons/mdi/alarm-off??raw&width=1em&height=1em',
  normalizedId: '/~icons/mdi/alarm-off??raw&width=1em&height=1em',
  res: '~icons/mdi/alarm-off???raw&width=1em&height=1em',
  query: { '?raw': '', width: '1em', height: '1em' }
}

when generating the components (raw):

generateComponent {
  collection: 'mdi',
  icon: 'alarm-off',
  query: { '?raw': '', width: '4em', height: '4em.svelte' },
  compiler: 'svelte'
}
generateComponent {
  collection: 'mdi',
  icon: 'alarm-off',
  query: { '?raw': '', width: '1em', height: '1em.svelte' },
  compiler: 'svelte'
}

and then the error since we're adding ?=raw in the svg:

[userquin]

There is a bug in when splitting the query params...