Vue 3.5+ · pulsoicon-vue
PulsoIcon for Vue
Every demo on this page is a Vue component rendered by Vue, with the icons from pulsoicon-vue. They draw exactly the same SVG as the React package and move the same way.
Install
npm install pulsoicon-vueVue 3.5 or newer. Motion (12 or newer), which plays the icons, is installed with it.
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. class and style go on the <svg>.
Live demos
Animated and static, outline and solid
<Heart /><Heart solid /><Heart :animated="false" /><Heart solid :animated="false" />Hover a figure to play it. The static ones don't move.
Click to play: a template ref
Not saved yet
Driven by state: :play
Props, live
<Heart :size="48" color="#f2552c" />Play from code
<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>startAnimation() and stopAnimation() both return a promise that resolves when the motion has finished. Or bind state: <Bell :auto-animated="false" :play="hasUnread" />.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
size | number | string | 24 | Width and height; numbers are pixels |
color | string | currentColor | Stroke colour, and fill colour when solid |
stroke-width | number | string | 2 | Stroke width on the 24-unit grid |
absolute-stroke-width | boolean | false | Keep the stroke the same number of pixels at any size |
solid | boolean | false | The filled drawing instead of the outline |
animated | boolean | true | false makes the icon completely still: nothing plays it, not the template ref and not play |
auto-animated | boolean | true | Play on hover / focus of the closest button, link, label or tab. false turns that off; the template ref and play still work |
play | boolean | — | true plays the motion, false returns to rest |