Using unicorn icons in vue

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

1. Install lottie web

Install lottie web dependency from npm

copy

npm install lottie-web

2. Add lottie animation to your component

Import animated icon json file in your component

copy

<template>
  <div ref="lottieContainer" style="width: 150px; height: 150px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import lottie from 'lottie-web'
import animationData from '@/assets/your_animation.json'

const lottieContainer = ref(null)

onMounted(() => {
  lottie.loadAnimation({
    container: lottieContainer.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData
  })
})
</script>

3. Get Lottie Animations

Find free animations at Unicornicons.

We use cookies