@heroicons-animated/vue

@heroicons-animated/vue

Beautifully animated Heroicons for Vue, built with Motion for Vue (motion-v).

Installation

npm install @heroicons-animated/vue motion-v
# or
pnpm add @heroicons-animated/vue motion-v

Usage

<script setup>
import { BeakerIcon } from "@heroicons-animated/vue";
</script>

<template>
  <BeakerIcon :size="32" color="orange" :stroke-width="2.5" />
</template>

Props

Exposed Methods

Each icon component exposes the following methods via template refs:

<script setup>
import { ref } from "vue";
import BeakerIcon from "@heroicons-animated/vue/beaker";

const iconRef = ref();

const triggerAnimation = () => {
  iconRef.value?.startAnimation();
};
</script>

<template>
  <BeakerIcon ref="iconRef" @click="triggerAnimation" />
</template>

Import Strategy

Both import styles are supported and tree-shakable in modern bundlers.

Root named imports:

<script setup>
import { BeakerIcon, RocketLaunchIcon } from "@heroicons-animated/vue";
</script>

Deep per-icon imports:

<script setup>
import BeakerIcon from "@heroicons-animated/vue/beaker";
</script>

Requirements

• Vue 3.0+
• motion-v 1.10+

Documentation

Visit vue.heroicons-animated.com for the full documentation and icon gallery.

License

MIT