Vue

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

vadivam-vue supports Vue 3.5 and renders native SVG components.

npm install vadivam-vue

Basic usage

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

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

Components accept Vue SVG attributes plus size, color, strokeWidth, absoluteStrokeWidth, and title. In templates, either kebab-case bindings such as :stroke-width or the corresponding prop names may be used according to Vue conventions.

Shared defaults

<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>

For composition-based setup code, the root package also exports provideVadivam and useVadivamContext.

Solid icons

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

<script setup lang="ts">
import { House } from "vadivam-vue";
import { House as HouseSolid } from "vadivam-vue/solid";
defineProps<{ active: boolean }>();
</script>

<template>
  <component :is="active ? HouseSolid : House" :size="20" title="Home" />
</template>

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

Per-icon imports

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

Runtime names

<script setup lang="ts">
import { DynamicIcon } from "vadivam-vue/dynamic";
</script>

<template>
  <DynamicIcon name="activity" :size="20" title="Activity" />
</template>

The /dynamic entry point also exports iconNames and dynamicIconImports. Use static imports for names known in source and read Dynamic icons before accepting arbitrary runtime strings. See Usage and Accessibility for shared SVG guidance.