Using unicorn icons in vue

Learn how to integrate rive animations into your vue application effortlessly.

1. Install rive dependency

Install rive web dependency from npm

copy

npm install @rive-app/webgl

2. Add rive animation to your component

Import animated icon json file in your component

copy

<template>
  <canvas ref="riveCanvas" width="150" height="150" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Rive } from "@rive-app/webgl";

const riveCanvas = ref(null);

onMounted(() => {
  new Rive({
    src: "/your_animation.riv",
    canvas: riveCanvas.value,
    autoplay: true,
    artboard: "Main",
    stateMachines: ["State Machine 1"], // Clicked , Hover
  });
});
</script>

3. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies