vanjs-feather


Feather icons for VanJS.

Powered by:

- Vite for tooling
- Vite-Plugin-VanJS for SSR support
- Vitest for unit tests
- TailwindCSS for demo styling
- VanJSConverter for generating the source code

Installation

Install with npm:
``bash
npm install vanjs-feather
`

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

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

Install with deno:
`bash
deno install npm:vanjs-feather
`

Usage

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

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 Feather is released under the MIT License.