Improve dev server performance with vite-plugin-transform-lucide-imports

[ieedan]

As mentioned in #2375 the easiest way to get better dev server performance previously was to just import all the icons using default imports.

This kinda sucks cause LLMs really like to use named imports and they are just generally more ergonomic. My solution to this was to build a plugin to transform all my named imports into default imports https://github.com/ieedan/vite-plugin-transform-lucide-imports

import { defineConfig } from "vite";
import transformLucideImports from "vite-plugin-transform-lucide-imports";

export default defineConfig({
	plugins: [transformLucideImports()],
});

Before

import { BarIcon, Foo, Baz as Baz2Icon, type XIcon } from "lucide";

After

import type { XIcon } from "lucide";
import BarIcon from "lucide/icons/bar";
import Foo from "lucide/icons/foo";
import Baz2Icon from "lucide/icons/baz";

demo.mp4

[WarningImHack3r]

Hi,
Coming from #1944, I created https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess more than a year ago for this exact purpose. Like you, I support all the Lucide frameworks, as well as CJS + ESM versions for relevant frameworks. My package is stable, thoroughly tested, and even features an auto-updater to support aliases and renamed icons as Lucide adds them.

Contrary to yours though, it minimizes dependencies by detecting imports through a regex instead of parsing the AST, despite the latter being notably a more reliable technique.

Anyways, just wanted to let you know, feel free to keep maintaining your version!

[ieedan]

This also supports renamed icons and handles typed icons as well :) No need to wait for it to update either.

[WarningImHack3r]

It does not. I'm talking about breaking changes in the icon naming by Lucide, not about import { Bar as Baz }. For example, the PlayCircle icon has been renamed to CirclePlay. On some Lucide packages, if you do a simple case change, it will not work: /icons/play-circle doesn't exist anymore.
The Lucide team has fixed this on some packages by introducing aliases so it doesn't break the imports anymore, but I'm afraid it will stop working entirely once Lucide reaches 1.0 (and that some of the Lucide packages don't support this right now as well).

Additionally, you do not seem to support LucideX aliases, only XIcon ones.

[ieedan]

It does not. I'm talking about breaking changes in the icon naming by Lucide, not about import { Bar as Baz }. For example, the PlayCircle icon has been renamed to CirclePlay. On some Lucide packages, if you do a simple case change, it will not work: /icons/play-circle doesn't exist anymore.

If they are renaming icons and changing the exports that would be a breaking change that would need to be addressed by the user. It would seem like they should be leaving those exports around until 1.0 when the older icons would be fully deprecated?

Additionally, you do not seem to support LucideX aliases, only XIcon ones.

I was not aware this was a thing which packages do this?

[WarningImHack3r]

If they are renaming icons and changing the exports that would be a breaking change that would need to be addressed by the user.

I agree with you, but when a named import works but our plugins break the build, users feel more like it’s our fault haha :)
And as I could pull off a solution, I implemented it. Not so much work on my side and a seamless experience for users!

I was not aware this was a thing which packages do this?

Here you go! https://lucide.dev/guide/advanced/aliased-names#import-name-styles

[ieedan]

Thanks for bringing these to my attention went ahead and fixed the aliased names thing :)