unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
3.79k stars 133 forks source link

Compiler extensions and query params conflicting #242

Open stramel opened 1 year ago

stramel commented 1 year ago

Describe the bug

When utilizing an import with query params such as ?width=1em&height=1em along side a compiler like 'svelte'. The result is a broken import path.

For example using the vite-svelte example,

// src/App.svelte
-import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?raw&width=4em&height=4em'
+import RawMdiAlarmOff from 'virtual:icons/mdi/alarm-off?width=4em&height=4em'
// src/App.svelte
-{@html RawMdiAlarmOff}
+<RawMdiAlarmOff />

removal of the raw query param causes the virtual import path to break. Below is the before and after the above changes:

Before: ~icons/mdi/alarm-off?raw&width=4em&height=4em After: ~icons/mdi/alarm-off?width=4em&height=4em.svelte

This prevents the app from building

Reproduction

./examples/vite-svelte

System Info

System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 102.52 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.2.0 - ~/.nvm/versions/node/v17.2.0/bin/node
    npm: 8.1.4 - ~/.nvm/versions/node/v17.2.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Edge: 105.0.1343.27
    Firefox: 102.2.0
    Safari: 16.0

Used Package Manager

pnpm

Validations