brand-bags-fm-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandBagsFmIcon = 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        ".bag",
15        {
16          rotate: [0, -8, 8, -6, 6, -3, 3, 0],
17          y: [0, -5, 0, -3, 0, -2, 0],
18        },
19        { duration: 0.6, ease: "easeInOut" },
20      );
21    };
22 
23    const stop = () => {
24      animate(".bag", { rotate: 0, y: 0 }, { duration: 0.2 });
25    };
26 
27    useImperativeHandle(ref, () => {
28      return {
29        startAnimation: start,
30        stopAnimation: stop,
31      };
32    });
33 
34    return (
35      <motion.svg
36        ref={scope}
37        onHoverStart={start}
38        onHoverEnd={stop}
39        xmlns="http://www.w3.org/2000/svg"
40        width={size}
41        height={size}
42        viewBox="0 0 1024 1024"
43        fill="none"
44        stroke={color}
45        strokeWidth={strokeWidth}
46        strokeLinecap="round"
47        strokeLinejoin="round"
48        className={`cursor-pointer ${className}`}
49      >
50        <motion.g className="bag" style={{ originX: "50%", originY: "100%" }}>
51          <motion.path
52// … truncated