Repository navigation
Does not seem to work in libraries #402
Description
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.4Used 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.
Reacted by Neveh A and Geoffroy Vincent
Activity
thomasqbrady commentedon Jun 3, 2025
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 commentedon Jun 3, 2025
You can do the following:
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 commentedon Jun 3, 2025
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 commentedon Jun 3, 2025
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 commentedon Jun 3, 2025
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 commentedon Jun 3, 2025
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-iconsnoriconify-jsoncollections).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 commentedon Jun 5, 2025
@thomasqbrady the plugin is not a bundler, if Svelte "build lib" doesn't "compile" svelte components, then the plugin cannot do anything.