unplugin-icons: vue-tsc Cannot find module '~icons/ui/info' or its corresponding type declarations.

Update for Nuxt users

The following entry in nuxt.config removed the import errors:

typescript: {
    tsConfig: {
        compilerOptions: {
            types: ["unplugin-icons/types/vue"]
        }
    }
}

Update

I was able to get this to work by replacing ~icons/ with virtual:icons/ when referencing an icon

・・・・・・

I’m experiencing this only in production with SvelteKit/Vite deploying to Vercel. My global.d.ts file has this line:

/// <reference types="unplugin-icons/types/svelte" />

and this is the error thrown when trying to build:

[vite:load-fallback] Could not load /Users/silas/Documents/Websites/projectname/~icons/material-symbols/send-outline-rounded (imported by src/lib/components/routes/ContactForm.svelte): ENOENT: no such file or directory, open '/Users/silas/Documents/Websites/projectname/~icons/material-symbols/send-outline-rounded'

Everything works perfectly in development.

We temporarily close this due to the lack of enough information. Please provide a minimal reproduction to reopen the issue. Thanks.

Why reproduction is required

The same problem has been solved with the following solution:

in tsconfig.json.

{
  ・・・
  "compilerOptions": {
    ・・・
    "types": ["unplugin-icons/types/vue"], // 修复 Cannot find module '~icons/xxx/xxx' or its corresponding type declarations.ts(2307)
    ・・・
  }，
}

@antfu, any help with this one? 🙏

Hi @Nacho114 I actually was able to do it on SvelteKit.

Here was my solution: https://github.com/unplugin/unplugin-icons/issues/128#issuecomment-1675830394

Also prepped a CodeSandbox for you here. While checking it, here are a few things to note:

1. Make sure to check the vite.config.ts

import Icons from 'unplugin-icons/vite';

const config: UserConfig = {
	plugins: [
		sveltekit(),
+		Icons({
+		  compiler: 'svelte',
+	   	}),
	]
};

1. Also check your tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		...,
		"strict": true,
+		"types": ["unplugin-icons/types/svelte"]
	}
}

Usual workflow when importing a new icon.

1. I go to https://icones.js.org/
2. See an icon you like, open it and copy something like: “ph:airplane-tilt-fill”
3. Use that piece of string and to import do two things:

/** Step 1. ON YOUR TS FILE. */
- import IconAirplane from "ph:airplane-tilt-fill"
+ import IconAirplane from "~icons/ph/airplane-tilt-fill"

/** Step 2. ON YOUR CLI. */
- pnpm add -D "ph:airplane-tilt-fill"
+ pnpm add @iconify-json/ph


/** 
You can probably see a pattern here when importing

  Copied String: "ph:airplane-tilt-fill" -> "<icon group>:<icon name>"

  import "~icons/<icon group>/<icon name>"

  pnpm add @iconify-json/<icon group>
*/

@amirhoseinsalimi It works if you use auto-import. https://github.com/antfu/unplugin-icons#auto-importing https://github.com/antfu/unplugin-icons#use-with-resolver

I’ll leave this issue open, since i feel it should either documented that this is necessary or should be fixed

Hey!

Thanks for the quick answer 😃

So I followed steps 1 and 2.

The main difference is that:

In src/app.d.ts I have import 'unplugin-icons/types/svelte';

And I added all icons already "@iconify/json": "^2.2.123" in the package.json

But I do still get the type error:

import ChevronRight from 'virtual:icons/gg/chevron-right';

I tried to replace virtual:icons with ~icons but with the same result 😕

two way to fix it

in nuxt.config.ts

export default defineNuxtConfig({
  // ...
  typescript: {
    tsConfig: {
      compilerOptions: {
        // add it
        types: ["unplugin-icons/types/vue"],
      },
    },
  },
});

then the ./.nuxt/tsconfig.json will add it in type property.

now it can work well.

another way is that write a d.ts and add /// <reference types="unplugin-icons/types/vue" /> in the top.

it also can work well.

hope these way can help you. 😃