<script setup lang="ts">
withDefaults(defineProps<{
  size?: number | string
  iconSize?: number | string
}>(), {
  size: 80,
  iconSize: 48,
})
</script>

<template>
  <v-avatar class="brand-avatar-spin" color="primary" :size="size">
    <v-icon color="red-accent-1" icon="mdi-heart-pulse" :size="iconSize" />
  </v-avatar>
</template>

<style scoped>
.brand-avatar-spin {
  animation: brand-avatar-spin 0.9s ease-out both;
}

@keyframes brand-avatar-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
