@just-dom/lucide

@just-dom/lucide integrates Lucide icons into Just DOM. It adds a lucide method to the DOM object that creates fully typed SVG icon elements.

Installation

npm install @just-dom/lucide

lucide is a dependency of @just-dom/lucide, so you do not need to add the lucide package yourself when you only install the plugin.

For a multi-file app, register Lucide in jd.config.ts like any other plugin. To scaffold Vite with that layout, use create-just-dom.

If you select the Lucide plugin in create-just-dom (or pass --plugins=lucide), the generated jd.config uses lucidePlugin (the full icon set) for a working starter. For smaller production bundles, replace it with createLucidePlugin and import only the icons you need, as in Quick Start and Tree-Shakeable.

Quick Start

import DOM, { withPlugins } from "just-dom";
import { createLucidePlugin } from "@just-dom/lucide";
import { House, Search, Settings } from "lucide";

const jd = withPlugins(DOM, [
  createLucidePlugin({ icons: { House, Search, Settings } }),
]);

const nav = jd.nav({ className: "sidebar" }, [
  jd.lucide("House", { size: 20 }),
  jd.lucide("Search", { size: 20 }),
  jd.lucide("Settings", { size: 20 }),
]);

API

createLucidePlugin

Creates a plugin instance with a specific set of icons. Only registered icons are included in the bundle and available for autocompletion.

function createLucidePlugin<T extends Record<string, IconNode>>(config: {
  icons: T;
}): JDPlugin<{
  lucide: (name: keyof T & string, options?: LucideIconOptions) => SVGSVGElement;
}>;

Parameters

Parameter	Type	Description
`config.icons`	`Record<string, IconNode>`	An object mapping icon names to Lucide icon data

Returns

A JDPlugin that adds a lucide method to the DOM object.

lucide

The method added by the plugin.

jd.lucide(name, options?): SVGSVGElement

Parameter	Type	Description
`name`	`keyof T & string`	The icon name (must match one of the registered icons)
`options`	`LucideIconOptions`	Optional icon configuration

LucideIconOptions

Optional attributes merged onto the root <svg>. If you omit a field, Lucide’s defaults apply (same as the lucide package’s createElement: 24×24 viewport, stroke: currentColor, stroke-width: 2, round caps/joins, etc.).

Property	Type	When omitted	Description
`size`	`number`	`24`	Width and height in pixels
`color`	`string`	`currentColor`	Maps to the SVG `stroke` attribute
`strokeWidth`	`number`	`2`	Maps to `stroke-width`
`absoluteStrokeWidth`	`boolean`	`false`	If `true`, adjusts `stroke-width` when `size` differs from 24 so stroke thickness stays visually consistent
`className`	`string`	—	Maps to the `class` attribute on the SVG

Usage

Tree-Shakeable (Recommended)

Import only the icons you need. TypeScript will only allow icon names that you've registered:

import DOM, { withPlugins } from "just-dom";
import { createLucidePlugin } from "@just-dom/lucide";
import { Heart, Star, ThumbsUp } from "lucide";

const jd = withPlugins(DOM, [
  createLucidePlugin({ icons: { Heart, Star, ThumbsUp } }),
]);

jd.lucide("Heart");     // OK
jd.lucide("Star");      // OK
jd.lucide("Missing");   // TypeScript error!

All Icons (Prototyping)

For quick prototyping, the lucidePlugin export registers the full Lucide icon set from lucide (same keys as import { icons } from "lucide") with full name autocompletion:

import DOM, { withPlugins } from "just-dom";
import { lucidePlugin } from "@just-dom/lucide";

const jd = withPlugins(DOM, [lucidePlugin]);

jd.lucide("Heart");
jd.lucide("Rocket");
jd.lucide("Zap");

Note: This includes the entire Lucide icon set in your bundle. Use createLucidePlugin for production builds.

Customizing Icons

const heart = jd.lucide("Heart", {
  size: 32,
  color: "red",
  strokeWidth: 2.5,
  className: "icon-heart",
});

document.body.appendChild(heart);

Composing with DOM Elements

Icons return standard SVGSVGElement nodes, so they work seamlessly as children:

const button = jd.button(
  {
    className: "btn",
    onclick: () => console.log("liked!"),
  },
  [jd.lucide("Heart", { size: 16 }), " Like"]
);

Icon List

const icons = ["House", "User", "Settings", "Bell"] as const;

const nav = jd.ul(
  { className: "nav" },
  icons.map((name) =>
    jd.li({}, [jd.lucide(name, { size: 18 }), ` ${name}`])
  ),
);

Exports

Export	Type	Description
`createLucidePlugin`	`function`	Factory for tree-shakeable plugin instances
`lucidePlugin`	`JDPlugin`	Pre-configured plugin with all Lucide icons
`LucideIconOptions`	`type`	Options interface for the `lucide` method
`IconNode`	`type`	Re-exported from `lucide` for advanced use

@just-dom/lucide

On this page