{"id":22728,"library":"vite-plugin-lucide-preprocess","title":"Vite Plugin Lucide Preprocess","description":"A Vite plugin (v1.4.10) that tree-shakes Lucide icons by transforming non-tree-shakable imports like `import { IconName } from '@lucide/svelte'` into explicit path imports like `import IconName from '@lucide/svelte/icons/icon-name'`. Supports Vite 2+, Rollup 1+, and Rolldown. Features an auto-updater to handle renamed or deprecated Lucide icons automatically. Ships TypeScript types. Compared to manual import rewriting, it automates the process and works across any framework (React, Vue, Svelte, etc.) with Vite.","status":"active","version":"1.4.10","language":"javascript","source_language":"en","source_url":"https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess","tags":["javascript","vite","vite-plugin","lucide","tree-shaking","treeshaking","tree-shake","treeshake","imports","typescript"],"install":[{"cmd":"npm install vite-plugin-lucide-preprocess","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-lucide-preprocess","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-lucide-preprocess","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core plugin dependency; requires Vite >=2.","package":"vite","optional":false},{"reason":"Used for source code transformations.","package":"magic-string","optional":false}],"imports":[{"note":"ESM-only (the package is type: module). Named exports not exposed.","wrong":"const lucidePreprocess = require('vite-plugin-lucide-preprocess')","symbol":"lucidePreprocess (default export)","correct":"import lucidePreprocess from 'vite-plugin-lucide-preprocess'"},{"note":"It's a function call, not a constructor.","wrong":"plugins: [new lucidePreprocess()]","symbol":"plugin usage in vite.config","correct":"plugins: [lucidePreprocess()]"},{"note":"Only 'esm' or 'cjs' are valid; 'commonjs' is not recognized.","wrong":"lucidePreprocess({ importMode: 'commonjs' })","symbol":"Options object (importMode)","correct":"lucidePreprocess({ importMode: 'cjs' })"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport lucidePreprocess from 'vite-plugin-lucide-preprocess';\nimport { svelte } from '@sveltejs/vite-plugin-svelte';\n\nexport default defineConfig({\n  plugins: [\n    lucidePreprocess(), // must be before other plugins\n    svelte()\n  ]\n});\n\n// Then in your Svelte component:\n<script>\n  import { Home, User } from '@lucide/svelte';\n  // Transformed at build time to:\n  // import Home from '@lucide/svelte/icons/home';\n  // import User from '@lucide/svelte/icons/user';\n</script>\n\n<Home />\n<User />","lang":"typescript","description":"Adds the plugin to Vite config and demonstrates auto tree-shaking of Lucide icons in a Svelte component."},"warnings":[{"fix":"Ensure lucidePreprocess() is the first plugin in the array.","message":"Plugin must be added before any other preprocessors in the plugins array; otherwise transformations may be applied to already-processed code.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Only use with Lucide icon packages.","message":"The plugin only handles imports from Lucide packages (e.g., '@lucide/svelte', 'lucide-react'). It does not transform imports from other icon libraries.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Wait for the auto-updater or manually update icon names in your code. Check the Lucide changelog.","message":"Icons in Lucide are frequently renamed or deprecated. The auto-updater may take hours to release a fix, potentially breaking builds.","severity":"deprecated","affected_versions":">=1.1.0"},{"fix":"Test source maps in development and production. Reorder plugins if needed.","message":"The plugin uses magic-string for source transformation; source maps may be incorrect if other plugins transform the same code.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use the default import: import lucidePreprocess from 'vite-plugin-lucide-preprocess' and add it to plugins: [lucidePreprocess()].","cause":"The plugin expects a default export of the function, but trying to call it with named import or missing plugin registration.","error":"Error: Plugin vite-plugin-lucide-preprocess: no transformation applied for import from '@lucide/svelte'"},{"fix":"Install the package: npm install -D vite-plugin-lucide-preprocess and add lucidePreprocess() to the plugins list.","cause":"The plugin is not installed or not included in vite.config plugins array.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'transform')"},{"fix":"Run the auto-updater (wait for it) or verify you have the correct icon name from Lucide documentation. Ensure @lucide/svelte is installed.","cause":"The icon path does not exist; either the icon was renamed or the package is not installed.","error":"Module not found: Can't resolve '@lucide/svelte/icons/home'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}