Does not seem to work in libraries

[thomasqbrady]

Describe the bug

Similar to: #378 (comment)

We're using SvelteKit with Svelte 4 for context.

We publish a component library on our team. We want to use unplugin-icons in that library, as well as in the projects which consume that library. Currently we can build the component library just fine, but when we try to use the components in a another project we get:

✘ [ERROR] Could not resolve "~icons/tabler/menu-2"
node_modules/[our component library][a component].svelte:47:22:
      47 │ import IconMenu2 from "~icons/tabler/menu-2";

Reproduction

Create library using unplugin-icons. Use that library in another project and attempt to build.

System Info

System:
    OS: macOS 15.4.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 167.67 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm
  Browsers:
    Chrome: 135.0.7049.115
    Safari: 18.4

Used Package Manager

npm

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.

[thomasqbrady]

Not wanting to be or sound impatient, but checking in as this is probably a lower priority—due to fewer people making. Is there any news on this front?

[userquin]

You can do the following:

• go to https://icones.js.org/
• enter in the collections you use and export the icons for Svelte (check screenshot below using mdi collection: https://icones.js.org/collection/mdi)
• click the icons you want and click on Download > Svelte button
• drop the icons in your lib folder: the downloaded icons with the SVG like the result here

There is an option to add icons to the bag and then export them for some frameworks, right now only Vue, JSX and TSX avaliable, maybe you can download JSON and with an small JS script you can generate the icons from the JSON file.

I'm going to file an issue at icones repo to include the rest of frameworks (and maybe a PR):
antfu-collective/icones#370

download Svelte icons from icones

icones bag

download svg icons

[userquin]

Anyway, can you provide a minimal reproduction? I've no idea about packaging Svelte libs, maybe we only need some rollup options in the lib (?). IIRC some folk told me that svelte files are not built, and this should be the issue we need to solve...

[thomasqbrady]

I'll see about making a minimal reproduction, and yes, I think it's likely as easy as a config change. If I can figure out what that change is, I'll let you know, but I'll try to get a minimal repro first.

[thomasqbrady]

You can do the following:

• go to https://icones.js.org/
• enter in the collections you use and export the icons for Svelte (check screenshot below using mdi collection: https://icones.js.org/collection/mdi)
• click the icons you want and click on Download > Svelte button
• drop the icons in your lib folder: the downloaded icons with the SVG like the result here

There is an option to add icons to the bag and then export them for some frameworks, right now only Vue, JSX and TSX avaliable, maybe you can download JSON and with an small JS script you can generate the icons from the JSON file.

I'm going to file an issue at icones repo to include the rest of frameworks (and maybe a PR): antfu-collective/icones#370

download Svelte icons from icones

icones bag

download svg icons

I'm confused by this response. Are you offering an alternative to using unplugin-icons? Our reason for using your library is not that we don't know how to package the icons (using Tabler directly in a SvelteKit project does that pretty well for us out of the box); it's that there's an issue with Tabler and vite right now that makes build times quite long. Several people in the Tabler GitHub issues mentioned using unplugin-icons as a replacement for that tree-shaking setup, but it just doesn't appear to work with libraries.

It sounds like "replacement tree-shaker" is not an intended unplugin-icons use-case?

[userquin]

icones is prior to unplugin-icons, uses the same technique here (just a few text transformation) and it was built also by Anthony Fu.

You can use unplugin-icons in your apps (Svelte or Kit), but since Svelte "lib mode" doesn't build the components when bundling, you can use the icones website to include the icons components you use in the lib, you just pack them, and so consuming your lib will just work (no need for unplugin-icons nor iconify-json collections).

Instead using unplugin-icons, download and add them to your lib/icons folder, then include the icons also in the tgz like your non icon components.

About tree-shaking, Vite/SvelteKit should tree-shake unused icons from your lib.

[userquin]

@thomasqbrady the plugin is not a bundler, if Svelte "build lib" doesn't "compile" svelte components, then the plugin cannot do anything.