SvelteKit Library import error

[vdawg-git]

Describe the bug

It fails to resolve unplugin icons in a component imported from a UI library/dependency.
Edit: This is during dev and build.

✘ [ERROR] Could not resolve "virtual:icons/mingcute/close-line"

    ../../node_modules/.pnpm/@..@0.0.1-rc.32_@types+node@22.7.0_@vue+compiler-sfc@3.5.8_jiti@1.21.6_postcss-load-_hbmxqbqxr2ktizjeyao532r5he/node_modules/@../ui/dist/Notification/Notification.svelte:42:22:
      42 │ import IconClose from "virtual:icons/mingcute/close-line";
         ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "virtual:icons/mingcute/close-line" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

Reproduction

Consumer:
https://github.com/vdawg-git/unplugin-icon-issue-consumer

Minimal library repo:
https://github.com/vdawg-git/unplugin-icons-issue

System Info

  System:
    OS: Linux 6.10 EndeavourOS
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P
    Memory: 13.95 GB / 31.07 GB
    Container: Yes
    Shell: 3.7.1 - /bin/fish
  Binaries:
    Node: 22.9.0 - /usr/bin/node
    npm: 10.8.3 - /usr/bin/npm
    pnpm: 9.11.0 - /usr/bin/pnpm
    bun: 1.1.29 - /usr/bin/bun
  Browsers:
    Brave Browser: 129.1.70.117

Used Package Manager

pnpm

Validations

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

[userquin]

you need to add the types to your src/app.d.ts: check Svelte in the Configuration > Frameworks https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#frameworks

[vdawg-git]

Hey, thank you for the quick reply.

I added them now, however the errors occurs during dev/build and is not a type error.
So the error still occurs

[userquin]

So, the problem is about importing a component from another library, I'm checking what's the problem and solution

[userquin]

I guess you cannot use this approach, that's why this plugin was created, use directly the svg from virtual:icons/xxx, otherwise you will need to provide compiled svelte components (inject the svg when building the lib) or adding a preprocessor to apply this plugin manually.

[vdawg-git]

Hmm, I see. Do you know of a way to do the alternatives?
Are there plugins for this? unplugin-icons is so nice and I dont want to drop it :D

[userquin]

Maybe you should check UnoCSS Preset Icons.

You can use this preprocessor: https://github.com/svitejs/svelte-preprocess-svg (Dominik explaining it in the second video)

Check these Dominik's videos:

• https://www.youtube.com/watch?v=6fW613fblwk
• https://www.youtube.com/watch?v=svyUjUpyrWk

[vdawg-git]

Awesome, thank you for sharing!
I will check everything out :)

[vdawg-git]

The quest continues: unocss/unocss#4166
But I am making progress