diamond

1function Diamond(props: React.ComponentProps<"svg">) {
2  return (
3    <svg
4      viewBox="0 0 20 20"
5      fill="currentColor"
6      role="status"
7      aria-label="Loading"
8      {...props}
9    >
10      <style>
11        {`
12            @keyframes spin-pixel {
13              0% { opacity: 0; }
14              1% { opacity: 1; }
15              100% { opacity: 0; }
16            }
17            .pixel-1 { animation: spin-pixel 0.8s ease-in-out 0s infinite; }
18            .pixel-2 { animation: spin-pixel 0.8s ease-in-out 0.1s infinite; }
19            .pixel-3 { animation: spin-pixel 0.8s ease-in-out 0.2s infinite; }
20            .pixel-4 { animation: spin-pixel 0.8s ease-in-out 0.3s infinite; }
21            .pixel-5 { animation: spin-pixel 0.8s ease-in-out 0.4s infinite; }
22            .pixel-6 { animation: spin-pixel 0.8s ease-in-out 0.5s infinite; }
23            .pixel-7 { animation: spin-pixel 0.8s ease-in-out 0.6s infinite; }
24            .pixel-8 { animation: spin-pixel 0.8s ease-in-out 0.7s infinite; }
25          `}
26      </style>
27      {/* Top */}
28      <rect className="pixel-1" x="8" y="0" width="4" height="4" />
29      {/* Top Right */}
30      <rect className="pixel-2" x="12" y="4" width="4" height="4" />
31      {/* Right */}
32      <rect className="pixel-3" x="16" y="8" width="4" height="4" />
33      {/* Bottom Right */}
34      <rect className="pixel-4" x="12" y="12" width="4" height="4" />
35      {/* Bottom */}
36      <rect className="pixel-5" x="8" y="16" width="4" height="4" />
37      {/* Bottom Left */}
38      <rect className="pixel-6" x="4" y="12" width="4" height="4" />
39      {/* Left */}
40      <rect className="pixel-7" x="0" y="8" width="4" height="4" />
41      {/* Top Left */}
42      <rect className="pixel-8" x="4" y="4" width="4" height="4" />
43    </svg>
44  );
45}
46 
47export { Diamond };