brand-threads-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandThreadsIcon = 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      // Reset
14      animate(scope.current, { scale: 1, rotate: 0 });
15      animate(".animated-path", { pathLength: 1, opacity: 1 });
16 
17      // Animation
18      animate(
19        ".animated-path",
20        { pathLength: [0, 1], opacity: [0, 1] },
21        { duration: 1, ease: "easeInOut" },
22      );
23 
24      await animate(
25        scope.current,
26        {
27          scale: [0.5, 1.1, 1],
28          rotate: [180, -10, 0],
29        },
30        {
31          duration: 1,
32          ease: [0.34, 1.56, 0.64, 1],
33        },
34      );
35    };
36 
37    const stop = () => {
38      animate(scope.current, { scale: 1, rotate: 0 });
39      animate(".animated-path", { pathLength: 1, opacity: 1 });
40    };
41 
42    useImperativeHandle(ref, () => {
43      return {
44        startAnimation: start,
45        stopAnimation: stop,
46      };
47    });
48 
49    const handleHoverStart = () => {
50      start();
51    };
52 
53    const handleHoverEnd = () => {
54      stop();
55    };
56 
57    return (
58      <motion.svg
59        ref={scope}
60        onHoverStart={handleHoverStart}
61        onHoverEnd={handleHoverEnd}
62        xmlns="http://www.w3.org/2000/svg"
63        width={size}
64        height={size}
65        viewBox="0 0 24 24"
66        fill="none"
67        stroke={color}
68        strokeWidth={strokeWidth}
69        strokeLinecap="round"
70        strokeLinejoin="round"
71        className={`cursor-pointer ${className}`}
72      >
73        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
74        <motion.path
75          className="animated-path"
76          d="M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7 -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
77        />
78      </motion.svg>
79    );
80  },
81);
82 
83BrandThreadsIcon.displayName = "BrandThreadsIcon";
84 
85export default BrandThreadsIcon;