Code Monkey home page Code Monkey logo

Comments (4)

ericfennis avatar ericfennis commented on June 6, 2024 2

@david-plugge This is awesome thanks for sharing.

Aliases could be a problem, but not in the way you described. We currently have alias imports for certain icons, sometimes we rename icons when needed, we solve this by exporting the "old" name. But I think we can fix this.

from lucide.

david-plugge avatar david-plugge commented on June 6, 2024

I have not checked out if other packages than lucide-svelte expose the icons via the .../icons/* path but if so it would work for any lucide package when used with vite

from lucide.

TheEisbaer avatar TheEisbaer commented on June 6, 2024

@david-plugge thank you so much, this has solved my problem over at tabler icons:

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()
				};
			}
		}
	};
}

from lucide.

jamesbirtles avatar jamesbirtles commented on June 6, 2024

cool plugin, I had to modify it a bit to get it to work with icons with numbers in them, as well as new lines within the import.
Whilst i was there I also bodged in support for lucide aliases by checking against the .d.ts for each icon, I'm sure this pretty inefficient but its still faster than transforming all the icons

function lucideSvelteImportOptimizer(): Plugin {
	const aliases = readFileSync('node_modules/lucide-svelte/dist/aliases.d.ts', 'utf8');
	return {
		name: 'lucide-svelte optimizer',
		transform(code, id) {
			const ms = new MagicString(code, { filename: id });

			ms.replace(
				/([ \t]*)import\s+\{([^}]+)\}\s+from\s+["']lucide-svelte["'];/g,
				(match, whitespace: string, importNames: string) => {
					const hasSemi = match.endsWith(';');

					const imports = importNames
						.split(',')
						.map((v) => v.trim())
						.map((name) => {
							let path;
							const alias = aliases.match(
								new RegExp(`as ${name} } from '\\.\\/icons\\/(.+)\\.svelte';`),
							);
							if (alias) {
								path = alias[1]!;
							} else {
								path = name
									.split('')
									.map((c, i) => {
										const code = c.charCodeAt(0);
										return (code >= 65 && code <= 90) || (code >= 48 && code <= 57)
											? (i === 0 ? '' : '-') + c.toLowerCase()
											: c;
									})
									.join('');
							}

							return `${whitespace}import ${name} from 'lucide-svelte/icons/${path}'${hasSemi ? ';' : ''}`;
						});

					return imports.join('\n');
				},
			);

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

from lucide.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.