ampersand-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AmpersandIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", color = "currentColor", strokeWidth = 2 },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate("path", { pathLength: [0, 1] }, { duration: 0.6 });
14    };
15 
16    const stop = async () => {
17      animate("path", { pathLength: 1 }, { duration: 0.3 });
18    };
19 
20    useImperativeHandle(ref, () => {
21      return {
22        startAnimation: start,
23        stopAnimation: stop,
24      };
25    });
26 
27    const handleHoverStart = () => {
28      start();
29    };
30 
31    const handleHoverEnd = () => {
32      stop();
33    };
34 
35    return (
36      <motion.svg
37        ref={scope}
38        onHoverStart={handleHoverStart}
39        onHoverEnd={handleHoverEnd}
40        xmlns="http://www.w3.org/2000/svg"
41        width={size}
42        height={size}
43        viewBox="0 0 24 24"
44        fill="none"
45        stroke="currentColor"
46        strokeWidth={strokeWidth}
47        strokeLinecap="round"
48        strokeLinejoin="round"
49        color={color}
50        className={`cursor-pointer ${className}`}
51      >
52        <path d="M16 12h3" />
53        <path d="M17.5 12a8 8 0 0 1-8 8A4.5 4.5 0 0 1 5 15.5c0-6 8-4 8-8.5a3 3 0 1 0-6 0c0 3 2.5 8.5 12 13" />
54      </motion.svg>
55    );
56  },
57);
58 
59AmpersandIcon.displayName = "AmpersandIcon";
60 
61export default AmpersandIcon;