Vue

Try every example live on the Vue demo page.

Installation

npm install pulsoicon-vue

Vue 3.5 or newer. Motion 12 or newer plays the icons and is installed with the package.

Quick start

<script setup lang="ts">
import { Bell, Calendar, Trash2 } from "pulsoicon-vue";
</script>

<template>
  <button><Bell :size="20" /> Notifications</button>
  <button><Calendar /> Schedule</button>
  <button><Trash2 color="crimson" :stroke-width="1.5" /> Delete</button>
</template>

Props work in camelCase or kebab-case (:stroke-width, :auto-animated). class and style go on the <svg> after the icon’s own.

Props

size (24), color (currentColor), strokeWidth (2), absoluteStrokeWidth (false), solid (false), animated (true), autoAnimated (true) and play. They mean exactly what they mean in React; the template ref takes the place of React’s ref.

Outline, solid and static

<template>
  <Heart />
  <Heart solid />
  <Heart :animated="false" />
  <Heart solid :animated="false" />
</template>

Play from code

A template ref gives startAnimation() and stopAnimation(); both return a promise that resolves when the motion has finished.

<script setup lang="ts">
import { ref } from "vue";
import { Check, type IconHandle } from "pulsoicon-vue";

const check = ref<IconHandle>();
</script>

<template>
  <button @click="check?.startAnimation()">
    <Check ref="check" :auto-animated="false" /> Save
  </button>
</template>

Driven by state

<template>
  <Bell :auto-animated="false" :play="hasNewMessage" />
</template>

Loading icons on demand

pulsoicon-vue/all exports every icon by kebab-case name (all of them, so only where you need the full set). pulsoicon-vue/names lists the names without loading any icon, and pulsoicon-vue/icons/<name> loads one:

import { ICON_NAMES, type IconName } from "pulsoicon-vue/names";

const load = (name: IconName) => import(`pulsoicon-vue/icons/${name}`);

Accessibility

Icons render with aria-hidden="true"; label the button or link they sit in. Nothing moves when the system asks for reduced motion.