import React from "react";
import { IconTypes } from "./types";

export function IconLoading2({ className, size = 24 }: IconTypes): JSX.Element {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill="none"
      viewBox="0 0 24 24"
      className={className}
    >
      <path
        className="stroke-black dark:stroke-white"
        strokeWidth="2"
        d="M21.479 8.875a10 10 0 01.52 3.125"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M20.125 6.168a10 10 0 011.354 2.708"
        opacity="0.95"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M17.834 3.871a10 10 0 012.291 2.291"
        opacity="0.9"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M15.125 2.52c.966.31 1.88.767 2.708 1.354"
        opacity="0.85"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M12 2a9.998 9.998 0 013.125.52"
        opacity="0.8"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M8.875 2.52A9.999 9.999 0 0112 2"
        opacity="0.75"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M6.167 3.874A9.999 9.999 0 018.875 2.52"
        opacity="0.7"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M3.874 6.162a9.999 9.999 0 012.291-2.29"
        opacity="0.65"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M2.521 8.876a9.999 9.999 0 011.354-2.708"
        opacity="0.6"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M2 12a9.999 9.999 0 01.52-3.125"
        opacity="0.55"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M2.52 15.125A9.998 9.998 0 012 12"
        opacity="0.5"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M3.875 17.83a9.998 9.998 0 01-1.354-2.709"
        opacity="0.45"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M6.165 20.123a9.998 9.998 0 01-2.291-2.291"
        opacity="0.4"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M8.875 21.479a10 10 0 01-2.708-1.354"
        opacity="0.35"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M12 21.997a9.998 9.998 0 01-3.125-.52"
        opacity="0.3"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M15.125 21.477a9.997 9.997 0 01-3.125.52"
        opacity="0.25"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M17.833 20.125a9.999 9.999 0 01-2.708 1.354"
        opacity="0.2"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M20.125 17.832a10 10 0 01-2.291 2.291"
        opacity="0.15"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M21.479 15.121a9.999 9.999 0 01-1.354 2.708"
        opacity="0.1"
      ></path>
      <path
        strokeWidth="2"
        className="stroke-black dark:stroke-white"
        d="M22 12a10 10 0 01-.521 3.125"
        opacity="0.05"
      ></path>
    </svg>
  );
}
