ambulance-icon

1import { forwardRef, useImperativeHandle, useRef } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const AmbulanceIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
12 
13    const start = async () => {
14      animationControls.current.forEach((control) => control.stop());
15      animationControls.current = [];
16 
17      animationControls.current.push(
18        animate(
19          ".ambulance",
20          { x: [0, 1, 0, -1] },
21          { duration: 0.6, ease: "easeInOut", repeat: Infinity },
22        ),
23      );
24      animate(
25        ".plus",
26        { scale: [1, 1.3, 1] },
27        { duration: 0.6, ease: "easeInOut" },
28      );
29    };
30 
31    const stop = () => {
32      animationControls.current.forEach((control) => control.stop());
33      animationControls.current = [];
34 
35      animate(".ambulance", { x: 0 }, { duration: 0.2, ease: "easeInOut" });
36      animate(".plus", { scale: 1 }, { duration: 0.2, ease: "easeInOut" });
37    };
38 
39    useImperativeHandle(ref, () => {
40      return {
41        startAnimation: start,
42        stopAnimation: stop,
43      };
44    });
45 
46    const handleHoverStart = () => {
47      start();
48    };
49 
50    const handleHoverEnd = () => {
51      stop();
52    };
53 
54    return (
55      <motion.svg
56        ref={scope}
57        onHoverStart={handleHoverStart}
58        onHoverEnd={handleHoverEnd}
59        xmlns="http://www.w3.org/2000/svg"
60        width={size}
61        height={size}
62        viewBox="0 0 24 24"
63        fill="none"
64        stroke={color}
65        strokeWidth={strokeWidth}
66        strokeLinecap="round"
67        strokeLinejoin="round"
68        className={`cursor-pointer ${className}`}
69      >
70        <motion.g className="ambulance">
71          <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
72          <path d="M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14" />
73          <path d="M9 18h6" />
74          <circle cx="17" cy="18" r="2" />
75          <circle cx="7" cy="18" r="2" />
76        </motion.g>
77        <motion.g className="plus" style={{ transformOrigin: "8px 8px" }}>
78          <path d="M10 10H6" />
79          <path d="M8 8v4" />
80        </motion.g>
81      </motion.svg>
82// … truncated