feat: cursors

README.md

@@ -23,7 +23,7 @@ Here is the list in the format you requested:
 - [ ] Communication
 - [ ] Connectivity
 - [ ] Currency
-- [ ] Cursors
+- [x] Cursors
 - [ ] Design
 - [ ] Coding & development
 - [ ] Devices

src/App.tsx

@@ -240,6 +240,32 @@ import { Theater } from "./icons/theater";
 import { University } from "./icons/university";
 import { UtilityPole } from "./icons/utility-pole";
 import { Warehouse } from "./icons/warehouse";
+import { CirclePlus } from "./icons/circle-plus";
+import { Grab } from "./icons/grab";
+import { Lasso } from "./icons/lasso";
+import { LassoSelect } from "./icons/lasso-select";
+import { Loader } from "./icons/loader";
+import { LoaderCircle } from "./icons/loader-circle";
+import { LoaderPinwheel } from "./icons/loader-pinwheel";
+import { MousePointer } from "./icons/mouse-pointer";
+import { MousePointer2 } from "./icons/mouse-pointer-2";
+import { MousePointerBan } from "./icons/mouse-pointer-ban";
+import { MousePointerClick } from "./icons/mouse-pointer-click";
+import { PenTool } from "./icons/pen-tool";
+import { Pencil } from "./icons/pencil";
+import { PencilOff } from "./icons/pencil-off";
+import { Plus } from "./icons/plus";
+import { Pointer } from "./icons/pointer";
+import { PointerOff } from "./icons/pointer-off";
+import { Sparkles } from "./icons/sparkles";
+import { SquareDashedMousePointer } from "./icons/square-dashed-mouse-pointer";
+import { SquareMousePointer } from "./icons/square-mouse-pointer";
+import { Stamp } from "./icons/stamp";
+import { Text } from "./icons/text";
+import { TextCursor } from "./icons/text-cursor";
+import { TextSelect } from "./icons/text-select";
+import { Wand } from "./icons/wand";
+import { WandSparkles } from "./icons/wand-sparkles";
 
 const Icons = [
   Activity,
@@ -483,6 +509,32 @@ const Icons = [
   University,
   UtilityPole,
   Warehouse,
+  CirclePlus,
+  Grab,
+  Lasso,
+  LassoSelect,
+  Loader,
+  LoaderCircle,
+  LoaderPinwheel,
+  MousePointer,
+  MousePointer2,
+  MousePointerBan,
+  MousePointerClick,
+  PenTool,
+  Pencil,
+  PencilOff,
+  Plus,
+  Pointer,
+  PointerOff,
+  Sparkles,
+  SquareDashedMousePointer,
+  SquareMousePointer,
+  Stamp,
+  Text,
+  TextCursor,
+  TextSelect,
+  Wand,
+  WandSparkles,
 ];
 
 function App() {

src/icons/circle-plus.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+const SCALES = [0.9, 1.1, 1.2, 0.75];
+
+export const CirclePlus: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+  const plusRef = useRef<SVGPathElement>(null);
+  const path1Ref = useRef<SVGPathElement>(null);
+  const path2Ref = useRef<SVGPathElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { strokeDasharray: "0, 100", scale: 0 },
+        { strokeDasharray: "100, 0", scale: 1.2 },
+        { strokeDasharray: "100, 0", scale: 1 },
+      ],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+
+    plusRef.current?.animate(
+      [
+        { transform: "translateY(0)" },
+        { transform: "translateY(-3px)" },
+        { transform: "translateY(0)" },
+      ],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+        delay: 400,
+      }
+    );
+
+    [path1Ref, path2Ref].forEach((ref, idx) => {
+      if (!ref.current) return;
+
+      ref.current.animate(
+        [
+          { transform: "scaleX(1)" },
+          { transform: `scaleX(${SCALES[idx]})` },
+          { transform: "scaleX(1)" },
+        ],
+        {
+          delay: idx * 50 + 400,
+          duration: 400,
+        }
+      );
+    });
+  }, [hovered]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      ref={baseRef}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <g ref={plusRef}>
+        <path d="M8 12h8" />
+        <path d="M12 8v8" />
+      </g>
+    </svg>
+  );
+};

src/icons/grab.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Grab: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { strokeDasharray: "0, 100", transform: "translateY(0)" },
+        { strokeDasharray: "100, 0", transform: "translateY(-2px)" },
+        { strokeDasharray: "100, 0", transform: "translateY(0)" },
+        { strokeDasharray: "100, 0", transform: "translateY(-2px)" },
+        { strokeDasharray: "100, 0", transform: "translateY(0)" },
+      ],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+  }, [hovered]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      ref={baseRef}
+      {...props}
+    >
+      <path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4" />
+      <path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
+      <path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5" />
+      <path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
+      <path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0" />
+    </svg>
+  );
+};

src/icons/lasso-select.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const LassoSelect: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+  const cursorRef = useRef<SVGPathElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [{ strokeDasharray: "0, 100" }, { strokeDasharray: "100, 0" }],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+
+    cursorRef.current?.animate(
+      [
+        { transform: "translate(2px, 2px)" },
+        { transform: "translate(0px, -2px)" },
+        { transform: "translate(-2px, 0px)" },
+        { transform: "translate(0px, 0px)" },
+      ],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+  }, [hovered]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      ref={baseRef}
+      {...props}
+    >
+      <path d="M7 22a5 5 0 0 1-2-4" />
+      <path d="M7 16.93c.96.43 1.96.74 2.99.91" />
+      <path d="M3.34 14A6.8 6.8 0 0 1 2 10c0-4.42 4.48-8 10-8s10 3.58 10 8a7.19 7.19 0 0 1-.33 2" />
+      <path d="M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+      <path
+        d="M14.33 22h-.09a.35.35 0 0 1-.24-.32v-10a.34.34 0 0 1 .33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 0 1-.21.59h-4.49l-2.57 3.85a.35.35 0 0 1-.28.14z"
+        ref={cursorRef}
+      />
+    </svg>
+  );
+};

src/icons/lasso.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Lasso: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [{ strokeDasharray: "0, 100" }, { strokeDasharray: "100, 0" }],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+  }, [hovered]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      ref={baseRef}
+      {...props}
+    >
+      <path d="M7 22a5 5 0 0 1-2-4" />
+      <path d="M3.3 14A6.8 6.8 0 0 1 2 10c0-4.4 4.5-8 10-8s10 3.6 10 8-4.5 8-10 8a12 12 0 0 1-5-1" />
+      <path d="M5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+    </svg>
+  );
+};

src/icons/loader-circle.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const LoaderCircle: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      {
+        duration: 600,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+  }, [hovered]);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      ref={baseRef}
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+};