brand-vercel-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandVercelIcon = 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        ".triangle",
15        { rotateY: 180 },
16        { duration: 0.6, ease: "easeInOut" },
17      );
18    };
19 
20    const stop = async () => {
21      await animate(
22        ".triangle",
23        { rotateY: -180 },
24        { duration: 0.6, ease: "easeInOut" },
25      );
26    };
27 
28    useImperativeHandle(ref, () => ({
29      startAnimation: start,
30      stopAnimation: stop,
31    }));
32 
33    return (
34      <motion.svg
35        ref={scope}
36        onHoverStart={start}
37        onHoverEnd={stop}
38        xmlns="http://www.w3.org/2000/svg"
39        width={size}
40        height={size}
41        viewBox="0 0 24 24"
42        fill="none"
43        stroke={color}
44        strokeWidth={strokeWidth}
45        strokeLinecap="round"
46        strokeLinejoin="round"
47        className={`cursor-pointer ${className}`}
48      >
49        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
50        <motion.path className="triangle" d="M3 19h18l-9 -15z" />
51      </motion.svg>
52    );
53  },
54);
55 
56BrandVercelIcon.displayName = "BrandVercelIcon";
57export default BrandVercelIcon;