unplugin-icons icon indicating copy to clipboard operation
unplugin-icons copied to clipboard

Compiler extensions and query params conflicting

Open stramel opened this issue 1 year ago • 0 comments

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.

stramel avatar Oct 13 '22 17:10 stramel