vanjs-lucide

Lucide icons for VanJS.

Powered by:

• Vite for tooling
• Vite-Plugin-VanJS for SSR support (the demo)
• Vitest for unit tests
• TailwindCSS for demo styling

Installation

Install with npm:

npm install vanjs-lucide

Install with pnpm:

pnpm add vanjs-lucide

Install with bun:

bun add vanjs-lucide

Install with deno:

deno add npm:vanjs-lucide

Usage

Basic Usage You can call any icon(s) within your VanJS app:

import van from "vanjs-core";
import { Activity } from "vanjs-lucide";
const { main } = van.tags;

const App = () => {
   return main({},
      Activity({ class="icon", style="color: turquoise" });
   );
};

van.add(document.body, App());

JSX Usage When using vite-plugin-vanjs with JSX transformation enabled you can call any icon(s) within your VanJS app:

import van from "vanjs-core";
import { Activity } from "vanjs-lucide";

const App = () => {
   return <main>
      <Activity class="icon" style={{ color: "turquoise" }} />
   </main>;
};

van.add(document.body, <App />);

Notes

• All SVGSVGElement attributes should be supported, even with reactive values;
• Camel case attribute names are not supported and strongly discouraged (EG: use "stroke-width" instead of strokeWidth);
• Since the feather library adds color to icons via the stroke property, any text color value inherited from parent elements would apply to your icons;
• The width and height properties can change the scale of the icons, something you may not want when using custom style and / or class;
• JSX transformation via vite-plugin-vanjs allows you to use CSSStyleDeclaration like objects for your icons and elements in general.

License

VanJS Lucide is released under the MIT License.