bell-off-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BellOffIcon = 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        ".bell",
15        { x: [-1, 1, -1, 1, 0] },
16        { duration: 0.4, ease: "easeInOut" },
17      );
18      await animate(
19        ".slash",
20        { pathLength: [0, 1], opacity: [0, 1] },
21        { duration: 0.5, ease: "easeOut" },
22      );
23    };
24 
25    const stop = () => {
26      animate(".slash", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
27    };
28 
29    useImperativeHandle(ref, () => {
30      return {
31        startAnimation: start,
32        stopAnimation: stop,
33      };
34    });
35 
36    const handleHoverStart = () => {
37      start();
38    };
39 
40    const handleHoverEnd = () => {
41      stop();
42    };
43 
44    return (
45      <motion.svg
46        ref={scope}
47        onHoverStart={handleHoverStart}
48        onHoverEnd={handleHoverEnd}
49        xmlns="http://www.w3.org/2000/svg"
50        width={size}
51        height={size}
52        viewBox="0 0 24 24"
53        fill="none"
54        stroke={color}
55        strokeWidth={strokeWidth}
56        strokeLinecap="round"
57        strokeLinejoin="round"
58        className={`cursor-pointer ${className}`}
59      >
60        <motion.path className="bell" d="M10.268 21a2 2 0 0 0 3.464 0" />
61        <motion.path
62          className="bell"
63          d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"
64        />
65        <motion.path
66          className="slash"
67          d="m2 2 20 20"
68          initial={{ pathLength: 1, opacity: 1 }}
69        />
70        <motion.path
71          className="bell"
72          d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"
73        />
74      </motion.svg>
75    );
76  },
77);
78 
79BellOffIcon.displayName = "BellOffIcon";
80 
81export default BellOffIcon;