at-sign-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AtSignIcon = 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      animate(".draw", { pathLength: 0, opacity: 0 }, { duration: 0 });
14 
15      await animate(
16        ".outer",
17        { pathLength: [0, 1], opacity: [0, 1] },
18        { duration: 0.45, ease: "easeOut" },
19      );
20 
21      await animate(
22        ".path",
23        { pathLength: [0, 1], opacity: [0, 1] },
24        { duration: 0.6, ease: "easeOut" },
25      );
26 
27      animate(
28        ".inner",
29        { pathLength: [0, 1], opacity: [0, 1] },
30        { duration: 0.3, ease: "easeOut" },
31      );
32    };
33 
34    const stop = () => {
35      animate(".draw", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
36    };
37 
38    useImperativeHandle(ref, () => {
39      return {
40        startAnimation: start,
41        stopAnimation: stop,
42      };
43    });
44 
45    const handleHoverStart = () => {
46      start();
47    };
48 
49    const handleHoverEnd = () => {
50      stop();
51    };
52 
53    return (
54      <motion.svg
55        ref={scope}
56        onHoverStart={handleHoverStart}
57        onHoverEnd={handleHoverEnd}
58        xmlns="http://www.w3.org/2000/svg"
59        width={size}
60        height={size}
61        viewBox="0 0 24 24"
62        fill="none"
63        stroke={color}
64        strokeWidth={strokeWidth}
65        strokeLinecap="round"
66        strokeLinejoin="round"
67        className={`cursor-pointer ${className}`}
68      >
69        <motion.circle
70          className="draw inner"
71          cx="12"
72          cy="12"
73          r="4"
74          initial={{ pathLength: 1, opacity: 1 }}
75        />
76        <motion.path
77          className="draw path"
78          d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
79          initial={{ pathLength: 1, opacity: 1 }}
80        />
81        <motion.circle
82          className="draw outer"
83          cx="12"
84          cy="12"
85          r="10"
86          initial={{ pathLength: 1, opacity: 1 }}
87        />
88      </motion.svg>
89    );
90  },
91);
92 
93AtSignIcon.displayName = "AtSignIcon";
94 
95export default AtSignIcon;