spokes

1import { cn } from "@/lib/utils";
2 
3function Spokes({ className, style, ...props }: React.ComponentProps<"svg">) {
4  return (
5    <>
6      <style>{`
7        @keyframes loading-ui-spokes-spin {
8          to {
9            transform: rotate(360deg);
10          }
11        }
12      `}</style>
13      <svg
14        viewBox="0 0 24 24"
15        fill="none"
16        xmlns="http://www.w3.org/2000/svg"
17        className={cn(className)}
18        style={{
19          animationName: "loading-ui-spokes-spin",
20          animationDuration: "var(--duration, 1s)",
21          animationTimingFunction: "linear",
22          animationIterationCount: "infinite",
23          ...style,
24        }}
25        {...props}
26      >
27        <path
28          d="M12 2V6M16.2 7.8L19.1 4.9M18 12H22M16.2 16.2L19.1 19.1M12 18V22M4.9 19.1L7.8 16.2M2 12H6M4.9 4.9L7.8 7.8"
29          stroke="currentColor"
30          strokeWidth="2"
31          strokeLinecap="round"
32          strokeLinejoin="round"
33        />
34      </svg>
35    </>
36  );
37}
38 
39export { Spokes };