Solid

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

vadivam-solid supports Solid 1.9 and publishes Solid-aware source conditions alongside standard ESM output.

npm install vadivam-solid

Basic usage

import { Activity } from "vadivam-solid";

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

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

Shared defaults

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

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 the icon-node registry for advanced use.

Per-icon imports

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

Runtime names

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

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

The dynamic entry point exports DynamicIcon, iconNames, and dynamicIconImports. The component accepts normal icon props plus a kebab-case name and optional JSX fallback.

Use static imports for names known in source. See Dynamic icons and Usage, styling, and accessibility.