feat!: Add support for Svelte 4 (#297)

Author: userquin

README.md

@@ -499,7 +499,7 @@ Type Declarations
 For SvelteKit, in the `src/app.d.ts` file:
 
 ```ts
-import 'unplugin-icons/types/svelte'
+import 'unplugin-icons/types/svelte';
 ```
 
 For Svelte + Vite, in the `src/vite-env.d.ts` file:
@@ -510,6 +510,13 @@ For Svelte + Vite, in the `src/vite-env.d.ts` file:
 /// <reference types="unplugin-icons/types/svelte" />
 ```
 
+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>
 
 <details>

examples/sveltekit/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "scripts": {
     "build": "vite build",
-    "check": "sveltekit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "sveltekit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",
     "preview": "vite preview"
   },
@@ -15,7 +15,6 @@
     "@sveltejs/kit": "^1.20.4",
     "svelte": "^4.2.0",
     "svelte-check": "^3.5.0",
-    "svelte-preprocess": "^5.0.4",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "unplugin-icons": "workspace:*"

examples/sveltekit/src/app.d.ts

@@ -1,2 +1,12 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference types="unplugin-icons/types/svelte" />
+import 'unplugin-icons/types/svelte';
+
+declare global {
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        // interface PageData {}
+        // interface Platform {}
+    }
+}
+
+export {};

examples/sveltekit/svelte.config.js

@@ -1,10 +1,10 @@
-import preprocess from 'svelte-preprocess'
+import { vitePreprocess } from '@sveltejs/kit/vite'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess(),
+  preprocess: vitePreprocess(),
 }
 
 export default config

examples/vite-svelte/src/main.ts

@@ -1,7 +1,7 @@
 import App from './App.svelte'
 
 const app = new App({
-  target: document.getElementById('app'),
+  target: document.getElementById('app')!,
 })
 
 export default app

package.json

@@ -68,6 +68,12 @@
     "./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"
     },

pnpm-lock.yaml

@@ -1,8 +1 @@
-declare module 'virtual:icons/*' {
-  export { SvelteComponentDev as default } from 'svelte/internal'
-}
-
-declare module '~icons/*' {
-  import { SvelteComponentTyped } from 'svelte'
-  export default class extends SvelteComponentTyped<svelte.JSX.IntrinsicElements['svg']> {}
-}
+import './svelte4.d.ts'

types/svelte.d.ts

@@ -0,0 +1,8 @@
+declare module 'virtual:icons/*' {
+  export { SvelteComponentDev as default } from 'svelte/internal'
+}
+
+declare module '~icons/*' {
+  import { SvelteComponentTyped } from 'svelte'
+  export default class extends SvelteComponentTyped<svelte.JSX.IntrinsicElements['svg']> {}
+}

types/svelte3.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']> {}
+}

types/svelte4.d.ts

@@ -1 +1 @@
-import './vue3'
+import './vue3.d.ts'