Usage, styling, and accessibility

Size, color, style, and label Vadivam icons consistently across supported frameworks while preserving visual and accessible behavior.

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, and Preact. For raw DOM helper attributes, use SVG attribute names such as stroke-width.

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 defaults

React, React Native, Vue, Svelte, Solid, and Preact provide a VadivamProvider. Provider values are defaults and can be overridden by an individual icon:

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

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

Angular uses provideVadivamConfig instead. Astro has no provider API; pass props to each component.

Accessibility

Decorative icons

An icon that repeats adjacent text should be hidden from assistive technology:

<button type="button">
  <Activity aria-hidden="true" />
  Activity
</button>

Web framework components are decorative by default when no title or accessible attribute is provided. Supplying aria-hidden explicitly still makes intent clear and is useful when reviewing a control. The core createIcons helper also adds aria-hidden="true" to unlabeled placeholders; createElement does not, so label or hide its result yourself.

Meaningful icons

If an icon conveys information not present as visible text, give it an accessible name:

<Activity role="img" aria-label="Service is active" />

Framework components also support a title prop, which inserts an SVG <title> and marks the icon as an image:

<Activity title="Service is active" />

For React Native, use native accessibility props such as accessibilityLabel:

<Activity accessibilityLabel="Service is active" accessible />

Prefer visible text for primary actions. An icon-only button needs a name on the button itself:

<button type="button" aria-label="Search">
  <Search aria-hidden="true" />
</button>

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.