unplugin-icons
unplugin-icons copied to clipboard
Compiler extensions and query params conflicting
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
- [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.