Hugeicons

InstallationCopy Anchor Link

Add icons one by one, here Notification 01. Each icon is a .vue file in your project, drawn from Hugeicons' free set (stroke rounded, at a stroke of 2); the core that animates them comes from @animate-ui/vue/icons, which the CLI installs with the first icon.

npx shadcn-vue@latest add https://animate-ui.com/r/vue/icons-hugeicons-notification-01.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/icons-hugeicons-notification-01.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/icons-hugeicons-notification-01.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/icons-hugeicons-notification-01.json

UsageCopy Anchor Link

<script setup lang="ts">
import Notification01 from '@/components/animate-ui/icons/hugeicons/Notification01.vue';
</script>

<template>
  <Notification01 animate-on-hover />
</template>

Triggers, animations, timing and every prop are the same for all icon libraries: see Get Started.