Document per-icon imports in the Svelte packages and add `default` export conditions (#1630)

packages/icons-svelte-runes/README.md

@@ -74,6 +74,37 @@ Pass props to adjust the icon:
 
 Any other attribute is forwarded to the rendered `<svg>` element.
 
+## Importing individual icons
+
+Importing from the package root keeps your bundle small, because unused icons are removed. The bundler still has to compile every icon component (more than 6,000) before it can drop them, though, which slows down builds. To avoid that, import each icon from its own file:
+
+```svelte
+<script lang="ts">
+  import IconHeart from '@tabler/icons-svelte-runes/icons/heart';
+  import IconHeartFilled from '@tabler/icons-svelte-runes/icons/heart-filled';
+</script>
+
+<IconHeart />
+<IconHeartFilled />
+```
+
+The path is the icon name in kebab-case, as listed on [tabler.io/icons](https://tabler.io/icons); filled icons end with `-filled`. Old icon names kept for backwards compatibility (aliases) are only exported from the package root.
+
+With Vite 8 you can keep importing from the package root and let Rolldown skip compiling unused icons with [lazy barrel optimization](https://rolldown.rs/in-depth/lazy-barrel-optimization):
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      experimental: { lazyBarrel: true },
+    },
+  },
+});
+```
+
 ## TypeScript
 
 The package includes full TypeScript definitions. Icons are typed as Svelte 5 `Component<IconProps>`:

packages/icons-svelte-runes/package.json

@@ -32,11 +32,13 @@
     },
     "./icons": {
       "types": "./dist/tabler-icons-svelte-runes.d.ts",
-      "svelte": "./dist/tabler-icons-svelte-runes.js"
+      "svelte": "./dist/tabler-icons-svelte-runes.js",
+      "default": "./dist/tabler-icons-svelte-runes.js"
     },
     "./icons/*": {
       "types": "./dist/icons/*.svelte.d.ts",
-      "svelte": "./dist/icons/*.svelte"
+      "svelte": "./dist/icons/*.svelte",
+      "default": "./dist/icons/*.svelte"
     }
   },
   "sideEffects": false,

packages/icons-svelte/README.md

@@ -70,6 +70,37 @@ Pass props to adjust the icon:
 
 Any other attribute is forwarded to the rendered `<svg>` element. The package ships with TypeScript declarations.
 
+## Importing individual icons
+
+Importing from the package root keeps your bundle small, because unused icons are removed. The bundler still has to compile every icon component (more than 6,000) before it can drop them, though, which slows down builds. To avoid that, import each icon from its own file:
+
+```svelte
+<script lang="ts">
+  import IconHeart from '@tabler/icons-svelte/icons/heart';
+  import IconHeartFilled from '@tabler/icons-svelte/icons/heart-filled';
+</script>
+
+<IconHeart />
+<IconHeartFilled />
+```
+
+The path is the icon name in kebab-case, as listed on [tabler.io/icons](https://tabler.io/icons); filled icons end with `-filled`. Old icon names kept for backwards compatibility (aliases) are only exported from the package root.
+
+With Vite 8 you can keep importing from the package root and let Rolldown skip compiling unused icons with [lazy barrel optimization](https://rolldown.rs/in-depth/lazy-barrel-optimization):
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      experimental: { lazyBarrel: true },
+    },
+  },
+});
+```
+
 ## Svelte 5
 
 This package targets Svelte 3 and 4 and also works in Svelte 5 in legacy mode. For projects using runes, install [`@tabler/icons-svelte-runes`](https://www.npmjs.com/package/@tabler/icons-svelte-runes) instead. The API is identical, only the package name changes.

packages/icons-svelte/package.json

@@ -32,11 +32,13 @@
     },
     "./icons": {
       "types": "./dist/tabler-icons-svelte.d.ts",
-      "svelte": "./dist/tabler-icons-svelte.js"
+      "svelte": "./dist/tabler-icons-svelte.js",
+      "default": "./dist/tabler-icons-svelte.js"
     },
     "./icons/*": {
       "types": "./dist/icons/*.svelte.d.ts",
-      "svelte": "./dist/icons/*.svelte"
+      "svelte": "./dist/icons/*.svelte",
+      "default": "./dist/icons/*.svelte"
     }
   },
   "sideEffects": false,