chore: update svelte demo packages

components-demo/svelte-demo-vite/package.json

@@ -10,7 +10,6 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"devDependencies": {
-		"@iconify-icons/mdi-light": "^1.2.5",
 		"@iconify/svelte": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "^2.5.3",
 		"@tsconfig/svelte": "^5.0.2",

components-demo/svelte-demo-vite/src/App.svelte

@@ -6,9 +6,6 @@
 		disableCache,
 	} from '@iconify/svelte';
 
-	import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
-	import playIcon from '@iconify-icons/mdi-light/play';
-
 	import Checkbox from './lib/Checkbox.svelte';
 	import InlineDemo from './lib/Inline.svelte';
 	import OfflineUsageDemo from './lib/UsageOffline.svelte';
@@ -19,10 +16,18 @@
 	disableCache('all');
 
 	// Add 'mdi-light:presentation-play' as 'demo' for offline module
-	addOfflineIcon('demo', presentationPlay);
+	addOfflineIcon('demo', {
+		body: "<path fill=\"currentColor\" d=\"M2 4h8a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1h8v1h-1v11h-5.73l1.61 6h-1.04l-1.61-6H9.77l-1.61 6H7.12l1.61-6H3V5H2zm17 11V5H4v10zm-9-8h1l3 3l-3 3h-1zm1 1.41v3.18L12.59 10z\"/>",
+		width: 24,
+		height: 24
+	});
 
 	// Add 'mdi-light:play' as 'demo' for full module
-	addOnlineIcon('demo', playIcon);
+	addOnlineIcon('demo', {
+		body: "<path fill=\"currentColor\" d=\"M18.4 12.5L9 18.38L8 19V6zm-1.9 0L9 7.8v9.4z\"/>",
+		width: 24,
+		height: 24
+	});
 
 	// Add custom icon as 'experiment'
 	addOfflineIcon('experiment2', {

components-demo/svelte-demo-vite/src/lib/Checkbox.svelte

@@ -11,7 +11,7 @@
         width: 24,
         height: 24
     })
-    
+
     export let checked = false;
     export let text = '';
     export let hint = '';
@@ -34,4 +34,5 @@
 <div class="checkbox-container">
     <a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} mode={checked ? 'svg' : 'style'} />{text}</a>
     <small>{hint}</small>
-</div>
+	<Icon />
+</div>

components-demo/svelte-demo-vite/src/lib/UsageFullOffline.svelte

@@ -1,7 +1,16 @@
-<script>
+<script lang="ts">
-	import Icon from '@iconify/svelte';
+	import Icon, { type IconifyIcon } from '@iconify/svelte';
-    import accountIcon from '@iconify-icons/mdi-light/account';
+
-    import alertIcon from '@iconify-icons/mdi-light/alert';
+    const accountIcon: IconifyIcon = {
+        body: "<path fill=\"currentColor\" d=\"M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13zM11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6\"/>",
+        width: 24,
+        height: 24
+    };
+    const alertIcon: IconifyIcon = {
+        body: "<path fill=\"currentColor\" d=\"M1 21L11.5 2.81L22 21zm19.27-1L11.5 4.81L2.73 20zM11 14v-4h1v4zm0 2h1v2h-1z\"/>",
+        width: 24,
+        height: 24
+    }
 </script>
 
 <section class="icon-24">

components-demo/svelte-demo-vite/src/lib/UsageOffline.svelte

@@ -1,7 +1,16 @@
-<script>
+<script lang="ts">
-	import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+	import Icon, { type IconifyIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';
-    import accountIcon from '@iconify-icons/mdi-light/account';
+
-    import alertIcon from '@iconify-icons/mdi-light/alert';
+    const accountIcon: IconifyIcon = {
+        body: "<path fill=\"currentColor\" d=\"M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13zM11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6\"/>",
+        width: 24,
+        height: 24
+    };
+    const alertIcon: IconifyIcon = {
+        body: "<path fill=\"currentColor\" d=\"M1 21L11.5 2.81L22 21zm19.27-1L11.5 4.81L2.73 20zM11 14v-4h1v4zm0 2h1v2h-1z\"/>",
+        width: 24,
+        height: 24
+    }
 </script>
 
 <section class="icon-24">

components-demo/svelte-demo-vite/tsconfig.json

@@ -1,19 +1,24 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+	"extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
+	"compilerOptions": {
-    "target": "esnext",
+		"target": "esnext",
-    "useDefineForClassFields": true,
+		"useDefineForClassFields": true,
-    "module": "esnext",
+		"module": "esnext",
-    "resolveJsonModule": true,
+		"resolveJsonModule": true,
-    "baseUrl": ".",
+		"baseUrl": ".",
-    /**
+		/**
-     * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
+		 * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
+		 * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
+		 * of JS in `.svelte` files.
-     */
+		 */
-    "allowJs": true,
+		"allowJs": true,
-    "checkJs": true
+		"checkJs": true
-  },
+	},
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+	"include": [
+		"src/**/*.d.ts",
+		"src/**/*.ts",
+		"src/**/*.js",
+		"src/**/*.svelte"
+	]
 }

components-demo/sveltekit-demo/package.json

@@ -9,7 +9,6 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@iconify-icons/mdi-light": "^1.2.5",
 		"@iconify/svelte": "workspace:*",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",

components/svelte/src/svelte.d.ts

@@ -5,8 +5,5 @@ import type { SvelteHTMLElements } from 'svelte/elements';
  * Svelte component
  */
 export default class Icon extends SvelteComponent<
-	SvelteHTMLElements['svg'] &
+	SvelteHTMLElements['svg'] & IconProps & Record<`data-${string}`, string>
-		SvelteHTMLElements['span'] &
-		IconProps &
-		Record<`data-${string}`, string>
 > {}

iconify-icon-demo/svelte-demo/package.json

@@ -10,7 +10,6 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"devDependencies": {
-		"@iconify-icons/mdi-light": "^1.2.5",
 		"@sveltejs/vite-plugin-svelte": "^2.5.3",
 		"@tsconfig/svelte": "^5.0.2",
 		"iconify-icon": "workspace:*",

iconify-icon-demo/svelte-demo/src/lib/Counter.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import plusIcon from '@iconify-icons/mdi-light/plus';
+  import { type IconifyIcon } from 'iconify-icon'
+
+  const plusIcon: IconifyIcon = {
+    body: "<path fill=\"currentColor\" d=\"M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6z\"/>",
+    width: 24,
+    height: 24
+  }
 
 
   let count: number = 0

iconify-icon-demo/sveltekit-demo/package.json

@@ -2,6 +2,7 @@
 	"name": "@iconify-icon/sveltekit-demo",
 	"version": "0.0.1",
 	"scripts": {
+		"prepare": "svelte-kit sync",
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -9,7 +10,6 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@iconify-icons/mdi-light": "^1.2.5",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"@types/cookie": "^0.6.0",