lucid-icons-animated 1.0.0

package/filter.txt

@@ -0,0 +1,247 @@
+"use client";
+
+import type { Transition } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SlidersHorizontalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SlidersHorizontalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 100,
+  damping: 12,
+  mass: 0.4,
+};
+
+const SlidersHorizontalIcon = forwardRef<
+  SlidersHorizontalIconHandle,
+  SlidersHorizontalIconProps
+>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal"),
+    };
+  });
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+
+  return (
+    <div
+      className={cn(className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      <svg
+        fill="none"
+        height={size}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.line
+          animate={controls}
+          initial={false}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 14,
+            },
+            animate: {
+              x2: 10,
+            },
+          }}
+          x1="21"
+          x2="14"
+          y1="4"
+          y2="4"
+        />
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 10,
+            },
+            animate: {
+              x1: 5,
+            },
+          }}
+          x1="10"
+          x2="3"
+          y1="4"
+          y2="4"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 12,
+            },
+            animate: {
+              x2: 18,
+            },
+          }}
+          x1="21"
+          x2="12"
+          y1="12"
+          y2="12"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 8,
+            },
+            animate: {
+              x1: 13,
+            },
+          }}
+          x1="8"
+          x2="3"
+          y1="12"
+          y2="12"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 12,
+            },
+            animate: {
+              x2: 4,
+            },
+          }}
+          x1="3"
+          x2="12"
+          y1="20"
+          y2="20"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 16,
+            },
+            animate: {
+              x1: 8,
+            },
+          }}
+          x1="16"
+          x2="21"
+          y1="20"
+          y2="20"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 14,
+              x2: 14,
+            },
+            animate: {
+              x1: 9,
+              x2: 9,
+            },
+          }}
+          x1="14"
+          x2="14"
+          y1="2"
+          y2="6"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 8,
+              x2: 8,
+            },
+            animate: {
+              x1: 14,
+              x2: 14,
+            },
+          }}
+          x1="8"
+          x2="8"
+          y1="10"
+          y2="14"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 16,
+              x2: 16,
+            },
+            animate: {
+              x1: 8,
+              x2: 8,
+            },
+          }}
+          x1="16"
+          x2="16"
+          y1="18"
+          y2="22"
+        />
+      </svg>
+    </div>
+  );
+});
+
+SlidersHorizontalIcon.displayName = "SlidersHorizontalIcon";
+
+export { SlidersHorizontalIcon };

package/logout.txt

@@ -0,0 +1,105 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface LogoutIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LogoutIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  animate: {
+    x: 2,
+    translateX: [0, -3, 0],
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
+
+const LogoutIcon = forwardRef<LogoutIconHandle, LogoutIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+          <motion.polyline
+            animate={controls}
+            points="16 17 21 12 16 7"
+            variants={PATH_VARIANTS}
+          />
+          <motion.line
+            animate={controls}
+            variants={PATH_VARIANTS}
+            x1="21"
+            x2="9"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+LogoutIcon.displayName = "LogoutIcon";
+
+export { LogoutIcon };

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "lucid-icons-animated",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/refresh.txt

@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface RefreshCCWIconWIcon {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface RefreshCCWIcoWIcon extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const RefreshCWIcon = forwardRef<RefreshCCWIconWIcon, RefreshCCWIcoWIcon>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) onMouseEnter?.(e);
+        else controls.start("animate");
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) onMouseLeave?.(e);
+        else controls.start("normal");
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          transition={{ type: "spring", stiffness: 250, damping: 25 }}
+          variants={{
+            normal: { rotate: "0deg" },
+            animate: { rotate: "50deg" },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+          <path d="M8 16H3v5" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+RefreshCWIcon.displayName = "RefreshCWIcon";
+
+export { RefreshCWIcon };

package/settins.txt

@@ -0,0 +1,92 @@
+"use client";
+
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SettingsIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SettingsIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SettingsIcon = forwardRef<SettingsIconHandle, SettingsIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          transition={{ type: "spring", stiffness: 50, damping: 10 }}
+          variants={{
+            normal: {
+              rotate: 0,
+            },
+            animate: {
+              rotate: 180,
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+          <circle cx="12" cy="12" r="3" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+SettingsIcon.displayName = "SettingsIcon";
+
+export { SettingsIcon };