Animated Favorites Icon

Favorite.jsx

import { motion } from "framer-motion";
import { HoverIconProps } from '@/lib/types';

function Favorite ({
  isActive = false,
  size = null,
  style = {},
  startColor = "#ffba00",
  endColor = "#818181"
}: HoverIconProps) {
  const heart = {
    start: {
      fill: startColor,
      d: "M10.5,4.998C12.316,1.303 15.947,1.303 17.763,3.151C19.579,4.998 19.579,8.694 17.763,12.39C16.492,15.162 13.224,17.934 10.5,19.781C7.776,17.934 4.508,15.162 3.237,12.39C1.421,8.694 1.421,4.998 3.237,3.151C5.053,1.303 8.684,1.303 10.5,4.998ZM10.5,7.017C9.308,4.479 6.923,4.14 5.731,5.409C4.539,6.678 4.539,9.216 5.731,11.754C6.566,13.658 8.712,15.561 10.5,16.83C12.288,15.561 14.434,13.658 15.269,11.754C16.461,9.216 16.461,6.678 15.269,5.409C14.077,4.14 11.692,4.479 10.5,7.017Z"
    },
    end: {
      fill: endColor,
      d: "M10.5,4.998C12.316,1.303 15.947,1.303 17.763,3.151C19.579,4.998 19.579,8.694 17.763,12.39C16.492,15.162 13.224,17.934 10.5,19.781C7.776,17.934 4.508,15.162 3.237,12.39C1.421,8.694 1.421,4.998 3.237,3.151C5.053,1.303 8.684,1.303 10.5,4.998ZM10.5,10.859C10.505,10.854 10.504,10.86 10.499,10.86C10.493,10.86 10.496,10.858 10.5,10.861C10.504,10.865 10.495,10.861 10.5,10.859C10.507,10.856 10.497,10.866 10.5,10.859C10.503,10.852 10.505,10.868 10.5,10.863C10.495,10.858 10.505,10.864 10.5,10.859Z"
    }
  };
  return (
    <motion.svg
      style={style}
      viewBox={`-8 -8 36 36`}
      width={size || "65"}
      height={size || "65"}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      initial="start"
      animate={isActive ? 'end' : 'start'}
    >
      <motion.path
        id="heart"
        variants={heart}
        transition={{
          ease: "easeInOut"
        }}
        animate={{
          scale: isActive ? [1, 1.4, 1] : [1, 1.3, 1], // Rotate to 90 degrees then back to 0
          rotate: isActive ? [0, -5, 4, 0] : [0, 5, -4, 0], // Rotate to 90 degrees then back to 0
        }}
      />
    </motion.svg>
  );
}

export default Favorite;