vite-plugin-transform-lucide-imports

vite-plugin-transform-lucide-imports

Transform named lucide imports into default imports.

pnpm install vite-plugin-transform-lucide-imports -D

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

export default defineConfig({
	plugins: [/* other framework plugins */, transformLucideImports()],
});

Before

import { LucideFizzIcon, BarIcon, Foo, Baz as Baz2Icon, type XIcon } from "lucide-react-native";

After

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

https://github.com/user-attachments/assets/c2692f80-e8f6-4cb8-942d-8c109db49b5b

[!NOTE] If you are using any of the following lucide packages lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact they already support tree shaking and this plugin won't be necessary.

Why use this plugin?

Named lucide imports have long been the cause of slow dev server performance. This plugin transforms them into default imports, which are much faster to resolve.

Why not just use default imports?

Named imports have a few advantages over default imports:

• Better autocomplete
• Less verbose
• LLMs love to use named imports

Supported frameworks

• Svelte (This plugin MUST be added AFTER the SvelteKit plugin in the plugins array)
• React
• Vanilla JS

Supporting other frameworks

For frameworks that transpile to a valid JS / JSX syntax you can just pass your file extension to the extensions option of the plugin:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import transformLucideImports, { SUPPORTED_EXTENSIONS } from "vite-plugin-transform-lucide-imports";

export default defineConfig({
	// the plugin MUST be added after the plugin doing the transpilation
	// you may also want to spread the supported extensions to continue to support other extensions
	plugins: [vue(), transformLucideImports({ extensions: [...SUPPORTED_EXTENSIONS, ".vue"] })],
});

Feel free to contribute your frameworks extension!

By default the supported extensions are .ts, .tsx, .js, .jsx, .mjs, and .svelte.