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:
``bash
npm install vanjs-lucide
`

Install with pnpm:
`bash
pnpm add vanjs-lucide
`

Install with bun:
`bash
bun add vanjs-lucide
`

Install with deno:
`bash
deno add npm:vanjs-lucide
`

Usage

Basic Usage
You can call any icon(s) within your VanJS app:
`ts
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:
`tsx
import van from "vanjs-core";
import { Activity } from "vanjs-lucide";

const App = () => {
return

van.add(document.body, );
`

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.