vanjs-feather

Feather icons for VanJS.

Powered by:

• Vite and tsup for tooling
• Vitest for unit tests
• TailwindCSS for demo styling
• VanJSConverter for generating the source code

Installation

Install with npm:

npm install vanjs-feather

Install with pnpm:

pnpm install vanjs-feather

Install with yarn:

yarn add vanjs-feather

Usage

Basic Usage

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());

Properties

• id: string | undefined - sets an id non-state attribute for your icon, default: ""
• class: string | undefined - sets a class state for your icon, default: ""
• style: string | undefined - sets a style state for your icon, default: ""
• stroke: string | undefined - sets a stroke state for your icon, default: currentColor
• strokeWidth: number | undefined - sets a stroke-width state for your icon, default: 24
• width: number | undefined - sets a width state for your icon, default: 24
• height: number | undefined - sets a height state for your icon, default: 24

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.

License

VanJS Feather is released under the MIT License.