Migrate from Lucide

Switch from Lucide to Vadivam with one codemod. Every icon keeps its Lucide name, and each framework package mirrors the Lucide API.

Vadivam covers every current Lucide icon name, redrawn on the same 24px grid with the same 2px stroke. Each framework package mirrors the matching Lucide package, so most projects switch by renaming the package and the Lucide prefix. Layouts stay the same because the canvas, stroke, and props are unchanged.

Run the codemod

From your project root, preview the changes, then apply them:

npx vadivam migrate-lucide
npx vadivam migrate-lucide --write

Pass paths to limit the run, such as npx vadivam migrate-lucide src --write. It skips node_modules, build output, and framework caches. It then:

• rewrites Lucide imports, dynamic import() calls, require() calls, and test mocks to the matching Vadivam package
• maps /dynamic, /dynamicIconImports, and per-icon paths such as lucide-react/dist/esm/icons/bell to their Vadivam equivalents
• renames Lucide names imported or required from Lucide, and their uses outside strings (a re-export keeps its public name, as in VadivamBell as LucideBell): LucideBell becomes VadivamBell, LucideProps becomes VadivamProps, and createLucideIcon becomes createVadivamIcon
• imports deprecated Lucide aliases from their current name under the old local name, such as CircleAlert as AlertCircle and House as Home, so the rest of the file stays as written
• replaces Lucide dependencies in each package.json with the matching Vadivam package
• changes data-lucide attributes to data-vadivam, and .lucide CSS classes to .vadivam in stylesheets and component <style> blocks

Without --write the codemod only lists what would change. Afterwards, reinstall dependencies so your lockfile drops Lucide.

The codemod also lists what it left for you to check: imports Vadivam does not export, test mock factories whose keys name Lucide exports, and packages that need a hand migration. Icon names held in strings, such as a DynamicIcon name from data, are not renamed; check old aliases there against Dynamic icons.

Package map

What stays the same

• Icon names: arrow-right and ArrowRight exist in both, and ArrowRightIcon works too.
• Props: size, color, strokeWidth, absoluteStrokeWidth, className, and any native SVG attribute.
• Dynamic icons: DynamicIcon, iconNames, and dynamicIconImports from the /dynamic and /dynamicIconImports entry points. See Dynamic icons.
• Browser JavaScript: createIcons({ icons }) from vadivam replaces <i data-vadivam="menu"> elements like Lucide’s does with data-lucide.

Rendered icons carry vadivam vadivam-<name> classes instead of lucide lucide-<name>, so the codemod updates CSS selectors that target them.

Angular

vadivam-angular uses one standalone directive per icon instead of a lucide-icon component. Replace each icon by hand:

import { Component } from "@angular/core";
import { ArrowRight } from "vadivam-angular";

@Component({
  selector: "app-next",
  imports: [ArrowRight],
  template: `<svg vadivamArrowRight size="20"></svg>`,
})
export class NextComponent {}

Use provideVadivamConfig() for app-wide defaults. See Angular.

Static assets

For lucide-static files, use the matching vadivam assets: vadivam/icons/<name>.svg for files, vadivam/strings/<name> for SVG strings, vadivam/sprite.svg for a sprite, and vadivam/font/vadivam.css for the icon font. See Core SVG.

Compare the drawings

Each icon page, such as /icons/arrow-right, shows the Vadivam drawing next to the Lucide one, plus an overlay of the two. Vadivam follows a stricter design guide: whole-pixel lines, smoothed corners, and consistent keylines.