brand-openai-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandOpenaiIcon = 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      await animate(
14        ".internal",
15        { pathOffset: [1, 0] },
16        {
17          duration: 0.8,
18          ease: "easeInOut",
19          delay: (i) => i * 0.05,
20        },
21      );
22    };
23 
24    const stop = () => {
25      animate(
26        ".internal",
27        { pathOffset: 0 },
28        { duration: 0.3, ease: "easeInOut" },
29      );
30    };
31 
32    useImperativeHandle(ref, () => ({
33      startAnimation: start,
34      stopAnimation: stop,
35    }));
36 
37    return (
38      <motion.svg
39        ref={scope}
40        onHoverStart={start}
41        onHoverEnd={stop}
42        xmlns="http://www.w3.org/2000/svg"
43        width={size}
44        height={size}
45        viewBox="0 0 24 24"
46        fill="none"
47        stroke={color}
48        strokeWidth={strokeWidth}
49        strokeLinecap="round"
50        strokeLinejoin="round"
51        className={`cursor-pointer select-none ${className}`}
52      >
53        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
54 
55        {[
56          "M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35",
57          "M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946",
58          "M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348",
59          "M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45",
60          "M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946",
61          "M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42",
62        ].map((d, i) => (
63          <motion.path
64            key={i}
65            d={d}
66            className="internal"
67            initial={{
68              pathLength: 1,
69              opacity: 1,
70            }}
71          />
72        ))}
73      </motion.svg>
74    );
75  },
76);
77 
78BrandOpenaiIcon.displayName = "BrandOpenaiIcon";
79export default BrandOpenaiIcon;