Update to Svelte 5

README.md

@@ -3,7 +3,7 @@
 
 # svelte-simple-icons
 
-This package provides the [Simple Icons 14.7.0](https://github.com/simple-icons/simple-icons/releases/tag/14.7.0) packaged as a set of [Svelte](https://svelte.dev/) components.
+This package provides the [Simple Icons 14.8.0](https://github.com/simple-icons/simple-icons/releases/tag/14.8.0) packaged as a set of [Svelte](https://svelte.dev/) components.
 
   <a href="https://www.npmjs.com/package/@icons-pack/svelte-simple-icons" target="_blank">
     <img src="https://img.shields.io/npm/v/@icons-pack/svelte-simple-icons?color=CB061D&style=flat-square" alt="www.npmjs.com!" />
@@ -27,10 +27,10 @@ This package provides the [Simple Icons 14.7.0](https://github.com/simple-icons/
 Install the package in your project directory with:
 
 ```sh
-// with yarn
+# with yarn
 yarn add @icons-pack/svelte-simple-icons
 
-// with npm
+# with npm
 npm add @icons-pack/svelte-simple-icons
 ```
 
@@ -45,83 +45,51 @@ All icons are imported from a single file, where [ICON SLUG] is replaced by a ca
 ## Basic example
 
 ```svelte
-  <!-- Import a specific icon by its slug as: -->
-  <!-- import { Si[ICON SLUG] } from 'simple-icons'; -->
+<!-- Import a specific icon by its slug as: -->
+<!-- import { Si[ICON SLUG] } from '@icons-pack/svelte-simple-icons'; -->
 
-  <script>
-    import { SiReact, SiSvelte, SiDocker } from "@icons-pack/svelte-simple-icons";
-  </script>
+<script>
+  import { SiReact, SiSvelte, SiDocker } from "@icons-pack/svelte-simple-icons";
+</script>
 
-  <SiSvelte color="#FF3E00" size={90} />
+<SiSvelte color="#FF3E00" size={90} />
 
-  <SiReactJs color="#61DAFB" size={50} />
+<SiReact color="#61DAFB" size={50} />
 
-  <SiDocker />
+<SiDocker />
 ```
 
 ## Change title
 
 ```svelte
-  <!-- title default "Svelte" -->
-  <script>
-    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
-  </script>
+<!-- title default "Svelte" -->
+<script>
+  import { SiSvelte } from "@icons-pack/svelte-simple-icons";
+</script>
 
-  <SiSvelte title="My title" />
+<SiSvelte title="My title" />
 ```
 
 ## Custom styles
 
 ```svelte
-  <script>
-    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
-  </script>
-
-  <SiSvelte class="myStyle" />
-
-  <style>
-    .myStyle {
-      width: 35px;
-      height: 35px;
-    }
-  </style>
-```
-
-## Type Definition for Dynamic Icons in Svelte Components
-
-Sometimes, we want to provide the component dynamically to a component. We can do that by using `svelte:component` feature with the
-helper type `SiComponentType` type definition.
-
-```svelte
-<script lang="ts">
-  import type { SiComponentType } from '@icons-pack/svelte-simple-icons';
-
-  export let icon: SiComponentType;
-  export let text: string;
-  export let click: () => void = () => console.log('do something');
+<script>
+  import { SiSvelte } from "@icons-pack/svelte-simple-icons";
 </script>
 
-<button on:click={click}>
-  <svelte:component
-    this={icon}
-    title={text} <!-- optional, along with size and color properties -->
-  />
-  {text}
-</button>
-
-<style lang="scss">
-  button {
-    display: flex;
-    flex-direction: row;
-    text-decoration: none;
-    white-space: nowrap;
-    transition: border-color 0.25s;
-    box-shadow: none;
-    text-shadow: none;
+<SiSvelte class="myStyle" />
+
+<style>
+  :global(.myStyle) {
+    color: #ff3e00;
+    width: 8rem;
+    height: 8rem;
+    transition: transform 0.4s;
   }
 
-  .icon {
-    margin: 4px 4px 0 0;
+  :global(.myStyle:hover) {
+    transform: rotateZ(180deg);
+    transform-style: preserve-3d;
   }
 </style>
 ```
@@ -132,8 +100,8 @@ If you only need a few icons, you can import them individually instead of the en
 
 ```svelte
 <script>
-  import SiSvelte from "@icons-pack/svelte-simple-icons/icons/SiSvelte.svelte";
-  import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub.svelte";
+  import SiSvelte from "@icons-pack/svelte-simple-icons/icons/SiSvelte";
+  import SiGithub from "@icons-pack/svelte-simple-icons/icons/SiGithub";
 </script>
 
 <SiGithub />

package.json

@@ -57,24 +57,24 @@
     "release": "changeset publish"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.11",
-    "@sveltejs/adapter-auto": "3.1.1",
-    "@sveltejs/kit": "2.5.4",
-    "@sveltejs/package": "2.3.0",
-    "@sveltejs/vite-plugin-svelte": "3.0.2",
+    "@changesets/changelog-github": "0.5.1",
+    "@changesets/cli": "2.28.1",
+    "@sveltejs/adapter-auto": "4.0.0",
+    "@sveltejs/kit": "2.17.2",
+    "@sveltejs/package": "2.3.10",
+    "@sveltejs/vite-plugin-svelte": "5.0.3",
     "signale": "1.4.0",
-    "simple-icons": "14.7.0",
-    "svelte": "4.2.12",
-    "svelte-check": "3.6.8",
-    "tslib": "2.6.2",
+    "simple-icons": "14.8.0",
+    "svelte": "5.20.2",
+    "svelte-check": "4.1.4",
+    "tslib": "2.8.1",
     "typescript": "^5",
     "uppercamelcase": "3.0.0",
-    "vite": "5.2.6"
+    "vite": "6.1.1"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.5.0",
     "svelte": "^4.2.0 || ^5.0.0"
   },
-  "packageManager": "pnpm@9.15.0"
-}
+  "packageManager": "pnpm@10.4.1"
+}

scripts/generate-components.js

@@ -29,19 +29,21 @@ fs.writeFileSync(pathIndexExport, "", formatFile);
 const attrsToString = (attrs) => {
   return Object.keys(attrs)
     .map((key) => {
-      if (key === "width" || key === "height" || key === "fill") {
-        return key + "={" + attrs[key] + "}";
+      if(key === "class") {
+        return `class={className}`
+      } else if (key === "width" || key === "height" || key === "fill") {
+        return `${key}={${attrs[key]}}`;
       }
 
-      return key + '="' + attrs[key] + '"';
+      return `${key}="${attrs[key]}"`;
     })
     .join(" ");
 };
 
 const exportType = `
 import type { ComponentType, SvelteComponent } from 'svelte';
 
-export type SiComponentType = ComponentType<SvelteComponent<{ color?: string; size?: string; title?: string; }>>;
+export type SiComponentType = ComponentType<SvelteComponent<{ color?: string; size?: string; title?: string; class?: string; }>>;
 
 `
 fs.appendFileSync(pathIndexExport, exportType, formatFile);
@@ -62,20 +64,22 @@ ICONS.forEach((icon) => {
     height: "size",
     fill: "color",
     viewBox: "0 0 24 24",
+    class: "",
   };
 
-  const element = `
-    <script>
-      export let color = 'currentColor';
-      export let size = 24;
-      export let title = "${baseName}";
-    </script>
-
-    <svg ${attrsToString(defaultAttrs)}>
-      <title>{title}</title>
-      <path d="${SimpleIcons[baseName].path}" />
-    </svg>
-  `;
+  const element = `<script>
+  let {
+    color = 'currentColor',
+    title = "${baseName}",
+    class: className = '',
+    size = 24,
+  } = $props();
+</script>
+
+<svg ${attrsToString(defaultAttrs)}>
+  <title>{title}</title>
+  <path d="${SimpleIcons[baseName].path}" />
+</svg>`;
 
   const component = element;
 

vite.config.js

@@ -1,11 +1,6 @@
-import { sveltekit } from "@sveltejs/kit/vite";
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
 
-/** @type {import('vite').UserConfig} */
-const config = {
-  plugins: [sveltekit()],
-  test: {
-    include: ["src/**/*.{test,spec}.{js,ts}"],
-  },
-};
-
-export default config;
+export default defineConfig({
+	plugins: [sveltekit()]
+});