@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 included as a dependency and will be installed automatically.

For a multi-file app, add Lucide next to other plugins in jd.config.ts. To scaffold Vite + TypeScript with that layout, use create-just-dom.

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

Property	Type	Default	Description
`size`	`number`	`24`	Width and height in pixels
`color`	`string`	`"currentColor"`	Stroke color
`strokeWidth`	`number`	`2`	Stroke width
`absoluteStrokeWidth`	`boolean`	`false`	When `true`, stroke width doesn't scale with size
`className`	`string`	—	CSS class to apply to the SVG element

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 includes all 1400+ icons with full 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