Sponsor View on GitHub
Documentation

Quick Start

This guide will help you get started with Hovue in just a few minutes. We'll cover the basics of importing and using animated icons in your Vue components.

Basic Usage

The simplest way to use a Hovue icon:

<template>
  <HoArrowRight />
</template>

<script setup>
import { HoArrowRight } from 'hovue'
</script>

Customizing Size

Control the icon size using the :size prop:

<HoArrowRight :size="24" />
<HoArrowRight :size="48" />
<HoArrowRight :size="64" />

Changing Color

Set the icon color with the color prop:

<HoArrowRight color="currentColor" />
<HoArrowRight color="#319795" />
<HoArrowRight color="rgb(49, 151, 149)" />

Animations

Icons come with built-in animations. Choose from various animation types:

<HoArrowRight
  animation="slide"
  :animation-duration="300"
/>

Available animations: slide, bounce, rotate, pulse, fade

Complete Example

Here's a complete example using multiple props:

<template>
  <HoArrowRight
    :size="24"
    color="currentColor"
    animation="slide"
    :animation-duration="300"
  />
</template>

<script setup>
import { HoArrowRight } from 'hovue'
</script>

Using in Buttons

Icons work great in buttons and interactive elements:

<template>
  <button class="btn">
    Next
    <HoArrowRight :size="20" />
  </button>
</template>

Conditional Rendering

Use icons conditionally with Vue's v-if:

<HoCheck v-if="isComplete" />
<HoLoader v-else />

Dynamic Icons

Use dynamic component binding for dynamic icon selection:

<template>
  <component :is="selectedIcon" />
</template>

<script setup>
import { ref } from 'vue'
import { HoArrowRight, HoCheck } from 'hovue'

const selectedIcon = ref(HoArrowRight)
</script>

Next Steps

Now that you know the basics, explore the API Reference for all available props, or check out the Animation Guide to learn about all animation options.