bookmark-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { scaledStrokeWidth } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BookmarkIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
7  (
8    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
9    ref,
10  ) => {
11    const [scope, animate] = useAnimate();
12 
13    const start = async () => {
14      await animate(
15        ".bookmark-body",
16        {
17          scaleY: 0.9,
18          y: 2,
19        },
20        {
21          duration: 0.18,
22          ease: "easeOut",
23        },
24      );
25    };
26 
27    const stop = async () => {
28      await animate(
29        ".bookmark-body",
30        {
31          scaleY: 1,
32          y: 0,
33        },
34        {
35          duration: 0.18,
36          ease: "easeInOut",
37        },
38      );
39    };
40 
41    useImperativeHandle(ref, () => {
42      return {
43        startAnimation: start,
44        stopAnimation: stop,
45      };
46    });
47 
48    const handleHoverStart = () => {
49      start();
50    };
51 
52    const handleHoverEnd = () => {
53      stop();
54    };
55 
56    return (
57      <motion.div
58        ref={scope}
59        onHoverStart={handleHoverStart}
60        onHoverEnd={handleHoverEnd}
61        className={`inline-flex cursor-pointer ${className}`}
62      >
63        <svg
64          xmlns="http://www.w3.org/2000/svg"
65          width={size}
66          height={size}
67          viewBox="0 0 48 48"
68          fill="none"
69          stroke={color}
70          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}
71          strokeMiterlimit="10"
72          strokeLinecap="square"
73        >
74          <motion.path
75            className="bookmark-body"
76            style={{ transformOrigin: "50% 20%" }}
77            d="M24 34L41 44V8C41 5.23858 38.7614 3 36 3H12C9.23858 3 7 5.23858 7 8V44L24 34Z"
78          />
79        </svg>
80      </motion.div>
81    );
82  },
83);
84 
85BookmarkIcon.displayName = "BookmarkIcon";
86 
87export default BookmarkIcon;