Registry / devops / vite-plugin-lucide-preprocess

vite-plugin-lucide-preprocess

library1.4.10jsnpmunverified

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.

devops

npm install vite-plugin-lucide-preprocess

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-LUCIDE

vite-plugin-lucide-preprocess

devopsjavascriptv1.4.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

lucidePreprocess (default export)

✓ import lucidePreprocess from 'vite-plugin-lucide-preprocess'

✗ const lucidePreprocess = require('vite-plugin-lucide-preprocess')

ESM-only (the package is type: module). Named exports not exposed.

plugin usage in vite.config

✓ plugins: [lucidePreprocess()]

✗ plugins: [new lucidePreprocess()]

It's a function call, not a constructor.

Options object (importMode)

✓ lucidePreprocess({ importMode: 'cjs' })

✗ lucidePreprocess({ importMode: 'commonjs' })

Only 'esm' or 'cjs' are valid; 'commonjs' is not recognized.

Adds the plugin to Vite config and demonstrates auto tree-shaking of Lucide icons in a Svelte component.

// vite.config.ts import { defineConfig } from 'vite'; import lucidePreprocess from 'vite-plugin-lucide-preprocess'; import { svelte } from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [ lucidePreprocess(), // must be before other plugins svelte() ] }); // Then in your Svelte component: <script> import { Home, User } from '@lucide/svelte'; // Transformed at build time to: // import Home from '@lucide/svelte/icons/home'; // import User from '@lucide/svelte/icons/user'; </script> <Home /> <User />

Debug

Known issues

gotchaPlugin must be added before any other preprocessors in the plugins array; otherwise transformations may be applied to already-processed code.

fix

Ensure lucidePreprocess() is the first plugin in the array.

affects: >=1.0

gotchaThe plugin only handles imports from Lucide packages (e.g., '@lucide/svelte', 'lucide-react'). It does not transform imports from other icon libraries.

fix

Only use with Lucide icon packages.

affects: >=1.0

deprecatedIcons in Lucide are frequently renamed or deprecated. The auto-updater may take hours to release a fix, potentially breaking builds.

fix

Wait for the auto-updater or manually update icon names in your code. Check the Lucide changelog.

affects: >=1.1.0

gotchaThe plugin uses magic-string for source transformation; source maps may be incorrect if other plugins transform the same code.

fix

Test source maps in development and production. Reorder plugins if needed.

affects: >=1.0

Errors

Common errors & fixes

Error: Plugin vite-plugin-lucide-preprocess: no transformation applied for import from '@lucide/svelte'

The plugin expects a default export of the function, but trying to call it with named import or missing plugin registration.

fix

Use the default import: import lucidePreprocess from 'vite-plugin-lucide-preprocess' and add it to plugins: [lucidePreprocess()].

Uncaught TypeError: Cannot read properties of undefined (reading 'transform')

The plugin is not installed or not included in vite.config plugins array.

fix

Install the package: npm install -D vite-plugin-lucide-preprocess and add lucidePreprocess() to the plugins list.

Module not found: Can't resolve '@lucide/svelte/icons/home'

The icon path does not exist; either the icon was renamed or the package is not installed.

fix

Run the auto-updater (wait for it) or verify you have the correct icon name from Lucide documentation. Ensure @lucide/svelte is installed.

Upgrade

Version history

1.4.10latest on npm

Audit

Dependencies

viterequiredCore plugin dependency; requires Vite >=2.

magic-stringrequiredUsed for source code transformations.

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/WarningImHack3r/vite-plugin-lucide-preprocess ↗

packagehttps://www.npmjs.com/package/vite-plugin-lucide-preprocess ↗