hugeicons-animated

Animated built with , distributed as copy-paste components via the shadcn CLI. Inspired by .

Usage

bash
npx shadcn@latest add @hugeicons-animated/notification-03
tsx
import { Notification03Icon } from '@/components/ui/notification-03';
// hover animates automatically<Notification03Icon size={28} />
// or control it imperativelyconst ref = useRef<Notification03IconHandle>(null);ref.current?.startAnimation();

Adding a new icon

  1. Add an animation spec to scripts/icon-specs.mjs — the spec holds the hand-crafted Variants (svg-level and/or per-element). Export names come from .

  2. Generate the component (and regenerate the site manifest + registry):

    bash
    node scripts/gen-animated.mjs NewIconNamepnpm registry:build

    The grid in app/page.tsx picks up new icons automatically via app/icons-manifest.ts.

    (pnpm icon:gen <Name> still exists for a quick skeleton with a default draw-on animation, if you'd rather tune the file directly.)

Development

bash
pnpm dev

License

MIT. Icon shapes from the free Hugeicons set (@hugeicons/core-free-icons, MIT).