tabler-icons: icons-svelte builds ALL icons, even ones not used

I’m working on it here: https://github.com/tabler/tabler-icons/pull/969 🙂

I’ve fixed it in #1039

import IconAd from "@tabler/icons-svelte/IconAd.svelte";
import IconAdOff from "@tabler/icons-svelte/IconAdOff.svelte";
import IconAdFilled from "@tabler/icons-svelte/IconAdFilled.svelte";

Results:

> vite build

vite v5.1.4 building for production...
✓ 32 modules transformed.
dist/index.html                  0.40 kB │ gzip: 0.28 kB
dist/assets/index-DzadqsTt.css   1.04 kB │ gzip: 0.56 kB
dist/assets/index-Cg3TY0qG.js   13.24 kB │ gzip: 4.80 kB
✓ built in 293ms

@sapkra I’ve moved it to #993 as a part of biggest improvements

It is definitely hacky, it was just the way I had to make it work, I like tabler icons a lot. I feel this change is much more needed than any new icon, but I don’t speak for everyone.

Version 3.0.0:

Importing icons like this

import IconEdit from '@tabler/icons-svelte/icons/edit';
import IconTrash from '@tabler/icons-svelte/icons/trash';

Results in:

vite v5.1.6 building SSR bundle for production...
✓ 225 modules transformed.
vite v5.1.6 building for production...
✓ 208 modules transformed.

Importing icons like this

import { IconEdit, IconTrash } from '@tabler/icons-svelte';

Results in:

vite v5.1.6 building SSR bundle for production...
✓ 5412 modules transformed.
vite v5.1.6 building for production...
✓ 5395 modules transformed.

Named imports results in all icons in the icon pack being transformed during build

I tested 3.0.0-alpha.1 and the issue is still there, all icons are built regardless of how many you are using.

I’ve found a “solution” to this issue over at lucide-icons lucide-icons/lucide#1944 :

function tablerSvelteImportOptimizer(): import('vite').Plugin {
	return {
		name: 'tabler-svelte optimizer',
		transform(code, id) {
			const ms = new MagicString(code, { filename: id });
			ms.replace(
				/([ \t]*)import\s+\{([^;]*?)\}\s+from\s+['"]@tabler\/icons-svelte['"];/g,
				(match, whitespace: string, importNames: string) => {
					const hasSemi = match.endsWith(';');
					const imports = importNames
						.split(',')
						.map((v) => v.trim())
						.map((name) => {
							const path = name;
							return `${whitespace}import ${name} from '@tabler/icons-svelte/${path}.svelte'${hasSemi ? ';' : ''}`;
						});
					return imports.join('\n');
				}
			);

			if (ms.hasChanged()) {
				return {
					code: ms.toString(),
					map: ms.generateMap()
				};
			}
		}
	};
}

This converts named imports to direct imports during transforming.

any word on this? i’m going to stop using Tabler because I can’t bear waiting many seconds for each file change with HMR