Usage and styling

Size, color, and style Vadivam icons consistently across supported frameworks, set shared defaults, and keep imports tree-shakeable.

Vadivam icons use a 24 24 view box, no fill, currentColor, a default stroke width of 2, and round line caps and joins. Framework packages expose the same visual controls while forwarding native SVG attributes.

Size and color

import { Activity } from "vadivam-react";

<Activity size={20} color="rebeccapurple" strokeWidth={1.5} />;

size sets both width and height. color sets the SVG stroke. Because the default is currentColor, icons naturally inherit CSS text color:

<Activity className="status-icon" />

.status-icon {
  color: #2563eb;
  width: 1.25rem;
  height: 1.25rem;
}

Use the native spelling expected by the framework: for example, className in React and class in Vue, Svelte, Solid, Astro, Preact, and Qwik. For raw DOM helper attributes, use SVG attribute names such as stroke-width.

Outline and solid

Every icon comes in two styles under the same name: outline, from each package’s root, and solid, from its /solid entry. A solid icon covers exactly the outline’s footprint, so swapping one for the other, such as for a selected tab, never moves anything:

import { Bell } from "vadivam-react";
import { Bell as BellSolid } from "vadivam-react/solid";

{unread ? <BellSolid aria-label="Notifications" /> : <Bell aria-label="Notifications" />}

Solid icons take the same size, color, and title, with color setting the fill. They have no stroke, so strokeWidth and absoluteStrokeWidth don’t apply.

Absolute stroke width

Normally, scaling an SVG also scales its visible stroke. Set absoluteStrokeWidth when the stroke should remain visually close to the requested strokeWidth at another icon size:

<Activity size={48} strokeWidth={2} absoluteStrokeWidth />

This prop is available in all component and directive packages. It is not an option of the core createElement helper; set the resulting SVG attributes directly when using the core package.

Shared props

Every framework package accepts the same visual controls alongside its native SVG attributes:

Lit and <vadivam-icon> use label in place of title. Flutter and Jetpack Compose follow their own conventions; see Flutter and Jetpack Compose.

Shared defaults

Provider values are defaults and can be overridden by an individual icon. Pick your framework to see its provider API:

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

<VadivamProvider size={20} color="navy" strokeWidth={1.5}>
  <Activity />
  <Search color="tomato" />
</VadivamProvider>;

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

<VadivamProvider size={20} color="navy" strokeWidth={1.5}>
  <Activity />
  <Search color="tomato" />
</VadivamProvider>;

<script setup lang="ts">
import { Activity, Search, VadivamProvider } from "vadivam-vue";
</script>

<template>
  <VadivamProvider :size="20" color="navy" :stroke-width="1.5">
    <Activity />
    <Search color="tomato" />
  </VadivamProvider>
</template>

<script lang="ts">
  import { Activity, Search, VadivamProvider } from "vadivam-svelte";
</script>

<VadivamProvider size={20} color="navy" strokeWidth={1.5}>
  <Activity />
  <Search color="tomato" />
</VadivamProvider>

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

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

import { bootstrapApplication } from "@angular/platform-browser";
import { provideVadivamConfig } from "vadivam-angular";
import { AppComponent } from "./app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideVadivamConfig({
      size: 20,
      color: "navy",
      strokeWidth: 1.5,
    }),
  ],
});

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

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

An icon’s own props override provider values. See each framework guide for the full provider API.

Accessibility

Every icon is either decorative or meaningful, and each needs different props. See Accessibility for examples in each framework.

Static imports first

import { Search } from "vadivam-react";

Static imports are easiest for bundlers to tree-shake and do not add an asynchronous loading state. If the name comes from a database, CMS, or user configuration, use the dynamic icon APIs.