Svelte

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

vadivam-svelte supports Svelte 5.56 and newer within the Svelte 5 release line.

npm install vadivam-svelte

Basic usage

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

<Activity size={20} color="navy" strokeWidth={1.5} title="Activity" />

Components accept Svelte SVG attributes plus size, color, strokeWidth, absoluteStrokeWidth, title, and optional child content.

Shared defaults

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

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

The root package also exports setVadivamProps and getVadivamContext for custom context integration.

Solid icons

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

<script lang="ts">
  import { House } from "vadivam-svelte";
  import { House as HouseSolid } from "vadivam-svelte/solid";
  let { active } = $props();
</script>

{#if active}<HouseSolid size={20} title="Home" />{:else}<House size={20} title="Home" />{/if}

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

Per-icon imports

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

Runtime names

Svelte’s /dynamic entry point is a default component export:

<script lang="ts">
  import DynamicIcon from "vadivam-svelte/dynamic";
</script>

<DynamicIcon name="activity" size={20} title="Activity" />

The fallback prop is a Svelte snippet. The iconNames list and lazy import map are exported from vadivam-svelte/dynamicIconImports, not from the default dynamic component module.

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