brand-cursor-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandCursorIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      animate(
11        scope.current,
12        {
13          x: [0, -1, 1, -1, 0],
14          y: [0, 1, -1, 1, 0],
15        },
16        { duration: 0.25, repeat: 1 },
17      );
18    }, [animate, scope]);
19 
20    const stop = useCallback(() => {
21      animate(scope.current, { x: 0, y: 0 }, { duration: 0.15 });
22    }, [animate, scope]);
23 
24    useImperativeHandle(
25      ref,
26      () => ({
27        startAnimation: start,
28        stopAnimation: stop,
29      }),
30      [start, stop],
31    );
32 
33    return (
34      <motion.svg
35        ref={scope}
36        onHoverStart={start}
37        onHoverEnd={stop}
38        fill={color}
39        fillRule="evenodd"
40        height={size}
41        width={size}
42        style={{ flex: "none", lineHeight: 1 }}
43        viewBox="0 0 24 24"
44        xmlns="http://www.w3.org/2000/svg"
45        className={`cursor-ide-icon cursor-pointer ${className}`}
46        stroke={color}
47      >
48        <title>Cursor</title>
49        <motion.path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z" />
50      </motion.svg>
51    );
52  },
53);
54 
55BrandCursorIcon.displayName = "BrandCursorIcon";
56export default BrandCursorIcon;