brand-nextjs-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandNextjsIcon = 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(".circle", { pathLength: 0, opacity: 0 }, { duration: 0 });
14      await animate(".line", { pathLength: 0, opacity: 0 }, { duration: 0 });
15 
16      await animate(
17        ".circle",
18        { pathLength: [0, 1], opacity: [0, 1] },
19        { duration: 1.5 },
20      );
21 
22      await animate(
23        ".line",
24        { pathLength: [0, 1], opacity: [0, 1] },
25        { duration: 0.4 },
26      );
27    };
28 
29    const stop = () => {
30      animate(".circle", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
31      animate(".line", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
32    };
33 
34    useImperativeHandle(ref, () => {
35      return {
36        startAnimation: start,
37        stopAnimation: stop,
38      };
39    });
40 
41    const handleHoverStart = () => {
42      start();
43    };
44 
45    const handleHoverEnd = () => {
46      stop();
47    };
48 
49    return (
50      <svg
51        ref={scope}
52        onMouseEnter={handleHoverStart}
53        onMouseLeave={handleHoverEnd}
54        xmlns="http://www.w3.org/2000/svg"
55        width={size}
56        height={size}
57        viewBox="0 0 24 24"
58        fill="none"
59        stroke={color}
60        strokeWidth={strokeWidth}
61        strokeLinecap="round"
62        strokeLinejoin="round"
63        className={`icon icon-tabler icons-tabler-outline icon-tabler-brand-nextjs cursor-pointer ${className}`}
64      >
65        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
66        <motion.path
67          className="circle"
68          d="M9 15v-6l7.745 10.65a9 9 0 1 1 2.255 -1.993"
69          initial={{ pathLength: 1, opacity: 1 }}
70        />
71        <motion.path
72          className="line"
73          d="M15 12v-3"
74          initial={{ pathLength: 1, opacity: 1 }}
75        />
76      </svg>
77    );
78  },
79);
80 
81BrandNextjsIcon.displayName = "BrandNextjsIcon";
82 
83export default BrandNextjsIcon;