feat!: Add support for Svelte 4

README.md

@@ -499,15 +499,22 @@ Type Declarations
 For SvelteKit, in the `src/app.d.ts` file:
 
 ```ts
-import 'unplugin-icons/types/svelte'
+import 'unplugin-icons/types/svelte4'
 ```
 
 For Svelte + Vite, in the `src/vite-env.d.ts` file:
 
 ```js
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
-/// <reference types="unplugin-icons/types/svelte" />
+/// <reference types="unplugin-icons/types/svelte4" />
+```
+
+If you're still using Svelte 3, replace the reference to use Svelte 3:
+```js
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/svelte3" />
 ```
 
 <br></details>

examples/sveltekit/src/app.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="unplugin-icons/types/svelte" />
+/// <reference types="unplugin-icons/types/svelte4" />

examples/vite-svelte/src/vite-env.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
-/// <reference types="unplugin-icons/types/svelte" />
+/// <reference types="unplugin-icons/types/svelte4" />

package.json

@@ -65,8 +65,11 @@
     "./types/solid": {
       "types": "./types/solid.d.ts"
     },
-    "./types/svelte": {
-      "types": "./types/svelte.d.ts"
+    "./types/svelte3": {
+      "types": "./types/svelte3.d.ts"
+    },
+    "./types/svelte4": {
+      "types": "./types/svelte4.d.ts"
     },
     "./types/vue": {
       "types": "./types/vue.d.ts"

types/svelte4.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:icons/*' {
+  import { SvelteComponent } from 'svelte'
+  import type { SvelteHTMLElements } from 'svelte/elements'
+  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
+}
+
+declare module '~icons/*' {
+  import { SvelteComponent } from 'svelte'
+  import type { SvelteHTMLElements } from 'svelte/elements'
+  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
+}