{"id":22888,"library":"vite-plugin-transform-lucide-imports","title":"vite-plugin-transform-lucide-imports","description":"A Vite plugin (v0.3.1) that transforms named imports from lucide icon packages into default imports for improved dev server performance and tree-shaking. It is actively maintained with patches for Vite 8 compatibility and handles aliased icons, type imports, and multiple frameworks (React, Svelte, vanilla JS). Unlike alternatives that require manual refactoring, this plugin automates the conversion with zero config. Supports custom file extensions for other frameworks.","status":"active","version":"0.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/ieedan/vite-plugin-transform-lucide-imports","tags":["javascript","lucide","transform","imports","typescript"],"install":[{"cmd":"npm install vite-plugin-transform-lucide-imports","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-transform-lucide-imports","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-transform-lucide-imports","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for plugin ecosystem","package":"vite","optional":false}],"imports":[{"note":"Default export only; named destructure will cause undefined.","wrong":"import { transformLucideImports } from 'vite-plugin-transform-lucide-imports'","symbol":"transformLucideImports","correct":"import transformLucideImports from 'vite-plugin-transform-lucide-imports'"},{"note":"Named export, not default.","wrong":"import SUPPORTED_EXTENSIONS from 'vite-plugin-transform-lucide-imports'","symbol":"SUPPORTED_EXTENSIONS","correct":"import { SUPPORTED_EXTENSIONS } from 'vite-plugin-transform-lucide-imports'"},{"note":"TypeScript type only; do not use as value.","wrong":"import { VitePluginTransformLucideImports } from 'vite-plugin-transform-lucide-imports'","symbol":"VitePluginTransformLucideImports","correct":"import type { VitePluginTransformLucideImports } from 'vite-plugin-transform-lucide-imports'"}],"quickstart":{"code":"// Install: npm i -D vite-plugin-transform-lucide-imports\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport transformLucideImports from 'vite-plugin-transform-lucide-imports';\n\nexport default defineConfig({\n  plugins: [react(), transformLucideImports()],\n});\n\n// Before: import { HomeIcon } from 'lucide-react';\n// After: import HomeIcon from 'lucide-react/icons/home';","lang":"typescript","description":"Shows minimal Vite config with the plugin, and the transformation effect on import statements."},"warnings":[{"fix":"Ensure transformLucideImports() is listed after plugins that transpile files like .svelte or .vue.","message":"Plugin must be placed AFTER framework plugins (e.g., SvelteKit) in the plugins array to work correctly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use this plugin only for lucide packages that lack built-in tree-shaking (e.g., lucide-react-native).","message":"The plugin does not optimize lucide packages that already support tree-shaking (lucide, lucide-react, lucide-vue, etc.). It only targets packages like lucide-react-native.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"No action needed; the plugin automatically handles it.","message":"In version 0.2.0, the plugin now skips tree-shaken packages to avoid optimization. This may affect projects relying on explicit optimization.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Use with caution and review changelog before updating.","message":"The 'onwarn' option added in 0.3.0 is experimental and may change in future versions.","severity":"deprecated","affected_versions":">=0.3.0"},{"fix":"Enable 'verbatimModuleSyntax' in tsconfig.json to keep type imports explicit.","message":"Type-only imports (e.g., import type { XIcon } from ...) are preserved but moved to separate import statements; ensure your config supports type imports.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change to: import transformLucideImports from 'vite-plugin-transform-lucide-imports';","cause":"Using named import { transformLucideImports } instead of default import.","error":"Error: 'default' is not exported by node_modules/vite-plugin-transform-lucide-imports/dist/index.mjs, imported by vite.config.ts"},{"fix":"Update to >=0.3.0 or remove the 'onwarn' option from plugin config.","cause":"Plugin version <0.3.0 does not support the 'onwarn' option.","error":"TypeError: Cannot read properties of undefined (reading 'onwarn')"},{"fix":"Place transformLucideImports() after the Svelte/Vue plugin in the plugins array.","cause":"Plugin ran before framework plugin transformed the file (e.g., .svelte).","error":"Transform failed with error: Cannot read properties of undefined (reading 'includes')"},{"fix":"This warning is informational; no action needed. The import remains unchanged.","cause":"The lucide-react package already supports tree-shaking and is skipped by default.","error":"WARN: No matching lucide package found for import from 'lucide-react'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}