book-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { scaledStrokeWidth } from "./types";
4import { motion, useAnimate } from "motion/react";
5 
6const BookIcon = 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        ".book-line",
16        { pathLength: 0, opacity: 0 },
17        { duration: 0 },
18      );
19 
20      await animate(
21        ".book-line-1",
22        { pathLength: [0, 1], opacity: [0, 1] },
23        { duration: 0.3, ease: "easeInOut", delay: 0.1 },
24      );
25 
26      await animate(
27        ".book-line-2",
28        { pathLength: [0, 1], opacity: [0, 1] },
29        { duration: 0.3, ease: "easeInOut", delay: 0.05 },
30      );
31 
32      await animate(
33        ".book-line-3",
34        { pathLength: [0, 1], opacity: [0, 1] },
35        { duration: 0.3, ease: "easeInOut", delay: 0.05 },
36      );
37    };
38 
39    const stop = () => {
40      animate(".book-line", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
41    };
42 
43    useImperativeHandle(ref, () => {
44      return {
45        startAnimation: start,
46        stopAnimation: stop,
47      };
48    });
49 
50    const handleHoverStart = () => {
51      start();
52    };
53 
54    const handleHoverEnd = () => {
55      stop();
56    };
57 
58    return (
59      <motion.div
60        ref={scope}
61        onHoverStart={handleHoverStart}
62        onHoverEnd={handleHoverEnd}
63        className={`inline-flex cursor-pointer ${className}`}
64      >
65        <svg
66          xmlns="http://www.w3.org/2000/svg"
67          width={size}
68          height={size}
69          viewBox="0 0 48 48"
70          fill="none"
71          stroke={color}
72          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}
73          strokeMiterlimit="10"
74          strokeLinecap="square"
75        >
76          <motion.path className="book-spine" d="M24 40.5V41L24 10V10.5" />
77 
78          <motion.path
79            className="book-cover"
80            style={{ transformOrigin: "24px 25px" }}
81            d="M24 41C31.0005 36.9995 37.9995 36.9995 45 41V10.0003C37.9995 5.99989 31.0005 5.99989 24 10.0003C16.9995 5.99989 10.0005 5.99989 3 10.0003V41C10.0005 36.9995 16.9995 36.9995 24 41Z"
82          />
83 
84          <motion.path
85            className="book-line book-line-1"
86            d="M30 16.5C32.8362 15.1345 36.5662 15.06 39.5 16.2763"
87          />
88 
89// … truncated