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
Install with npm:
npm install vanjs-feather
Install with pnpm:
pnpm install vanjs-feather
Install with yarn:
yarn add vanjs-feather
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: currentColorstrokeWidth
: number | undefined - sets a stroke-width state for your icon, default: 2width
: number | undefined - sets a width state for your icon, default: 24height
: 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
.
VanJS Feather is released under the MIT License.