align-center-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AlignCenterIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".line-1", { scaleX: [1, 0.8, 1] }, { duration: 0.3 });
14      animate(
15        ".line-2",
16        { scaleX: [1, 1.2, 1] },
17        { duration: 0.3, delay: 0.1 },
18      );
19      animate(
20        ".line-3",
21        { scaleX: [1, 0.9, 1] },
22        { duration: 0.3, delay: 0.2 },
23      );
24    };
25 
26    const stop = () => {
27      animate(".line-1", { scaleX: 1 }, { duration: 0.2 });
28      animate(".line-2", { scaleX: 1 }, { duration: 0.2 });
29      animate(".line-3", { scaleX: 1 }, { duration: 0.2 });
30    };
31 
32    useImperativeHandle(ref, () => {
33      return {
34        startAnimation: start,
35        stopAnimation: stop,
36      };
37    });
38 
39    const handleHoverStart = () => {
40      start();
41    };
42 
43    const handleHoverEnd = () => {
44      stop();
45    };
46 
47    return (
48      <motion.svg
49        ref={scope}
50        onHoverStart={handleHoverStart}
51        onHoverEnd={handleHoverEnd}
52        xmlns="http://www.w3.org/2000/svg"
53        width={size}
54        height={size}
55        viewBox="0 0 24 24"
56        fill="none"
57        stroke={color}
58        strokeWidth={strokeWidth}
59        strokeLinecap="round"
60        strokeLinejoin="round"
61        className={`cursor-pointer ${className}`}
62        style={{ overflow: "visible" }}
63      >
64        <motion.path
65          className="line-1"
66          d="M4 6l16 0"
67          style={{ transformOrigin: "center" }}
68        />
69        <motion.path
70          className="line-2"
71          d="M8 12l8 0"
72          style={{ transformOrigin: "center" }}
73        />
74        <motion.path
75          className="line-3"
76          d="M6 18l12 0"
77          style={{ transformOrigin: "center" }}
78        />
79      </motion.svg>
80    );
81  },
82);
83 
84AlignCenterIcon.displayName = "AlignCenterIcon";
85 
86export default AlignCenterIcon;