Preact

Use free, open-source Vadivam SVG icon components in Preact with shared defaults, per-icon imports, and dynamic runtime names.

vadivam-preact supports Preact 10.29 and renders native SVG components.

npm install vadivam-preact

Basic usage

import { Activity } from "vadivam-preact";

export function Status() {
  return <Activity size={20} color="navy" strokeWidth={1.5} title="Activity" />;
}

Icons accept Preact SVG attributes plus size, color, strokeWidth, absoluteStrokeWidth, and title.

Shared defaults

import { Activity, Search, VadivamProvider } from "vadivam-preact";

export function Toolbar() {
  return (
    <VadivamProvider size={20} color="navy" strokeWidth={1.5}>
      <Activity />
      <Search color="tomato" />
    </VadivamProvider>
  );
}

The root entry point also exports useVadivamContext, a generic Icon, createVadivamIcon, and icon nodes for advanced use.

Solid icons

Every icon has a solid twin with the same name in vadivam-preact/solid:

import { House } from "vadivam-preact";
import { House as HouseSolid } from "vadivam-preact/solid";

export function HomeTab({ active }: { active: boolean }) {
  const Icon = active ? HouseSolid : House;
  return <Icon size={20} title="Home" />;
}

Solid icons fill their shapes with color and have no stroke props. VadivamProvider sets defaults for both styles, and vadivam-preact/solid/icons/house and vadivam-preact/solid/dynamic work like their outline counterparts.

Per-icon imports

import Activity from "vadivam-preact/activity";
import Search from "vadivam-preact/icons/search";

Runtime names

import { DynamicIcon } from "vadivam-preact/dynamic";

<DynamicIcon name="activity" size={20} fallback={null} />;

The /dynamic entry point exports DynamicIcon, iconNames, and dynamicIconImports. Dynamic components accept normal icon props, a kebab-case name, and optional Preact children as a fallback.

Use static imports for known names. See Dynamic icons, Usage, and Accessibility.