🧩 `unplugin-icons` imports show as unresolved and there's no way to ignore them

[markgaze]

Discuss anything related to Knip

I may just be missing something but I'm using https://github.com/unplugin/unplugin-icons in a few repos and when I run knip against them, all of the imports from that library are classed as unresolved. The library uses a ~icons/iconset/icon-name import convention and TypeScript can handle it with a reference to the unplugin-icons/types/[framework] types but knip doesn't.

I was happy to just ignore them but I can't find a way to do that either, as adding to ignoreDependencies or ignore doesn't seem to catch them.

I've created a repro on StackBlitz in an Astro project to show what I mean. Running npm run knip shows the unresolved import for the icon I've added.

I've also had a search on other repos on GitHub for anyone doing the same thing but the only one I found with "~icons/" in ignore was still getting the unresolved imports in their Action anyway.

Let me know if any other info would be useful or if I've just missed something in the docs.

[webpro]

Knip has paths to add those manually, eg:

{
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "ignoreDependencies": [],
  "paths": {
    "~icons/*": ["..."]
  }
}

Could that work?

[webpro]

Btw to ignore dependencies the package name should be used, which in this case, oddly, would be "~icons"

[markgaze]

Thanks for the speedy response!

Btw to ignore dependencies the package name should be used, which in this case, oddly, would be "~icons"

Unfortunately, that doesn't seem to work either!

Knip has paths to add those manually, eg:

{
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "ignoreDependencies": [],
  "paths": {
    "~icons/*": ["..."]
  }
}

Could that work?

I think this should work but will potentially need to figure out where it should actually point to, unplugin-icons just references the JSON files in, for example, @iconify-json/mdi on the repro and I'm guessing knip wants it to resolve to somewhere that has an export?

EDIT: I've updated the repro to have both of those options in

[webpro]

Unfortunately, that doesn't seem to work either!

In that case, because the specifier starts with ~, Knip thinks it's not a package name.

I think this should work

The Knip paths option basically extends tsconfig.json#compilerOptions.paths - so you can try to fix it there and if you'd move those over to knip.json you should have the same results.

[markgaze]

Thanks for the advice, looks like this entry will do it (in the case of Astro, at least):

"paths": {
  "~icons/*": ["node_modules/unplugin-icons/types/astro.d.ts"]
}

I'll have to test it for other frameworks but I can't see why it wouldn't work!

I've updated the repro to have that line in there to show it working. Thanks again for all your help 🙂

[webpro]

Ah yeah, reminds me a bit of https://knip.dev/features/compilers#svelte - guess this case could be documented a bit too so everyone better understands what's going on and how it could be handled.

Glad you figured it out!

[markgaze]

Yeah, does seem similar to that, let me know if you want me to document it or have a look at a PR etc 🙂

[webpro]

Yeah just not sure yet how/where/what. Where would you expect/find it?

My initial idea was to have https://knip.dev/guides/handling-issues as a generic guide when facing issues. Feel free to discuss or even take a stab at it, I'd appreciate it!

[markgaze]

Yeah just not sure yet how/where/what. Where would you expect/find it?

My initial idea was to have knip.dev/guides/handling-issues as a generic guide when facing issues. Feel free to discuss or even take a stab at it, I'd appreciate it!

I think I expected to see it on here when I was looking yesterday, it seems similar to the last issue on there but I can see why it could also fit on the handling-issues page. I'll see if I can describe the issue on known-issues and raise a PR for it and we can discuss from there 🙂