Animated icons

// The static icon, and its animated twin of the same name.
import { HeartIcon } from "@fanvue/ui";
import { HeartIcon as AnimatedHeartIcon } from "@fanvue/ui/animated-icons";

import { useRef } from "react";
import { HeartIcon } from "@fanvue/ui/animated-icons";
import type { HeartIconHandle } from "@fanvue/ui/animated-icons";

function LikeCard() {
  const icon = useRef<HeartIconHandle>(null);
  return (
    <button
      type="button"
      onMouseEnter={() => icon.current?.startAnimation()}
      onMouseLeave={() => icon.current?.stopAnimation()}
    >
      <HeartIcon controlRef={icon} size={24} />
      Like
    </button>
  );
}