brand-telegram-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandTelegramIcon = 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(
14        ".plane",
15        { x: [0, 10, -10, 0], y: [0, -10, 10, 0], opacity: [1, 0, 0, 1] },
16        { duration: 1, times: [0, 0.4, 0.5, 1], ease: "easeInOut" },
17      );
18    };
19 
20    const stop = () => {
21      animate(".plane", { x: 0, y: 0, opacity: 1 });
22    };
23 
24    useImperativeHandle(ref, () => {
25      return {
26        startAnimation: start,
27        stopAnimation: stop,
28      };
29    });
30 
31    const handleHoverStart = () => {
32      start();
33    };
34 
35    const handleHoverEnd = () => {
36      stop();
37    };
38 
39    return (
40      <motion.svg
41        ref={scope}
42        onHoverStart={handleHoverStart}
43        onHoverEnd={handleHoverEnd}
44        xmlns="http://www.w3.org/2000/svg"
45        width={size}
46        height={size}
47        viewBox="0 0 24 24"
48        fill="none"
49        stroke={color}
50        strokeWidth={strokeWidth}
51        strokeLinecap="round"
52        strokeLinejoin="round"
53        className={`cursor-pointer ${className}`}
54      >
55        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
56        <motion.path
57          className="plane"
58          d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"
59        />
60      </motion.svg>
61    );
62  },
63);
64 
65BrandTelegramIcon.displayName = "BrandTelegramIcon";
66 
67export default BrandTelegramIcon;