feat: animals icons

README.md

@@ -15,7 +15,7 @@ Here is the list in the format you requested:
 
 - [x] Accessibility
 - [ ] Accounts & access
-- [ ] Animals
+- [x] Animals
 - [x] Arrows
 - [x] Brands
 - [x] Buildings

src/App.tsx

@@ -3,7 +3,7 @@ import { Icons } from "./icons/icons";
 
 function App() {
   return (
-    <main className="w-screen min-h-screen flex items-center justify-center flex-col gap-10">
+    <main className="w-screen min-h-screen flex items-center justify-center flex-col gap-10 py-10">
       <h1 className="font-bold">SVGlide</h1>
       <div>
         <p className="text-center">

src/icons/bird.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Bird: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "translate(0, 0)", rotate: "0deg" },
+        { transform: "translate(0, -5px)", rotate: "-15deg" },
+        { transform: "translate(0, 0)", rotate: "0deg" },
+        { transform: "translate(0, -5px)", rotate: "-15deg" },
+        { transform: "translate(0, 0)", rotate: "0deg" },
+      ],
+      {
+        duration: 800,
+        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="M16 7h.01" />
+      <path d="M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20" />
+      <path d="m20 7 2 .5-2 .5" />
+      <path d="M10 18v3" />
+      <path d="M14 17.75V21" />
+      <path d="M7 18a6 6 0 0 0 3.84-10.61" />
+    </svg>
+  );
+};

src/icons/bone.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Bone: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "translate(0, 0)", rotate: "0deg" },
+        { transform: "translate(0, -5px)", rotate: "-15deg" },
+        { transform: "translate(0, 0)", rotate: "0deg" },
+        { transform: "translate(0, -5px)", rotate: "-15deg" },
+        { transform: "translate(0, 0)", rotate: "0deg" },
+      ],
+      {
+        duration: 800,
+        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="M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z" />
+    </svg>
+  );
+};

src/icons/bug-off.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const BugOff: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "scale(0.5)" },
+        { transform: "scale(1.1)" },
+        { transform: "scale(1.2)" },
+        { transform: "scale(1)" },
+      ],
+      {
+        duration: 800,
+        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="M15 7.13V6a3 3 0 0 0-5.14-2.1L8 2" />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M22 13h-4v-2a4 4 0 0 0-4-4h-1.3" />
+      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+      <path d="m2 2 20 20" />
+      <path d="M7.7 7.7A4 4 0 0 0 6 11v3a6 6 0 0 0 11.13 3.13" />
+      <path d="M12 20v-8" />
+      <path d="M6 13H2" />
+      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+    </svg>
+  );
+};

src/icons/bug-play.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const BugPlay: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+  const cursorRef = useRef<SVGPathElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "scale(0.5)" },
+        { transform: "scale(1.1)" },
+        { transform: "scale(1.2)" },
+        { transform: "scale(1)" },
+      ],
+      {
+        duration: 800,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+      }
+    );
+
+    cursorRef.current?.animate(
+      [
+        { transform: "translate(0px, 0px)" },
+        { transform: "translate(2px, 2px)" },
+        { transform: "translate(0px, -2px)" },
+        { transform: "translate(-2px, 0px)" },
+        { transform: "translate(0px, 0px)" },
+      ],
+      {
+        duration: 800,
+        iterations: 1,
+        fill: "forwards",
+        easing: "ease-in-out",
+        delay: 200,
+      }
+    );
+  }, [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="M12.765 21.522a.5.5 0 0 1-.765-.424v-8.196a.5.5 0 0 1 .765-.424l5.878 3.674a1 1 0 0 1 0 1.696z"
+        ref={cursorRef}
+      />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M18 11a4 4 0 0 0-4-4h-4a4 4 0 0 0-4 4v3a6.1 6.1 0 0 0 2 4.5" />
+      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+      <path d="M6 13H2" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+      <path d="m8 2 1.88 1.88" />
+      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+    </svg>
+  );
+};

src/icons/bug.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Bug: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "scale(0.5)" },
+        { transform: "scale(1.1)" },
+        { transform: "scale(1.2)" },
+        { transform: "scale(1)" },
+      ],
+      {
+        duration: 800,
+        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="m8 2 1.88 1.88" />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
+      <path d="M12 20v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+      <path d="M6 13H2" />
+      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+      <path d="M22 13h-4" />
+      <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
+    </svg>
+  );
+};

src/icons/cat.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+
+import type { IconProps } from "./icon.types";
+
+export const Cat: React.FC<IconProps> = ({
+  "data-hovered": hovered,
+  ...props
+}) => {
+  const baseRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!hovered) return;
+
+    baseRef.current?.animate(
+      [
+        { transform: "scale(0.5)" },
+        { transform: "scale(1.1)" },
+        { transform: "scale(1.2)" },
+        { transform: "scale(1)" },
+      ],
+      {
+        duration: 800,
+        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="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z" />
+      <path d="M8 14v.5" />
+      <path d="M16 14v.5" />
+      <path d="M11.25 16.25h1.5L12 17l-.75-.75Z" />
+    </svg>
+  );
+};