Ably Logo

1interface LogoProps {
2  className?: string;
3  variant?: "icon";
4  mode?: "dark" | "light";
5}
6 
7const COLORS = {
8  dark: {
9    ring: "#FF5416",
10    curve: "#FF8B60",
11  },
12  light: {
13    ring: "#FF5416",
14    curve: "#FF8B60",
15  },
16};
17 
18export function AblyLogo({
19  className,
20  variant = "icon",
21  mode = "dark",
22}: LogoProps) {
23  const colors = COLORS[mode];
24 
25  return (
26    <svg
27      role="img"
28      viewBox="0 0 64 64"
29      xmlns="http://www.w3.org/2000/svg"
30      className={className}
31    >
32      <title>Ably</title>
33      <path
34        fill={colors.ring}
35        d="M27.1 18.6C14.6 18.6 4.4 28.8 4.4 41.3 4.4 53.8 14.6 64 27.1 64 39.6 64 49.8 53.8 49.8 41.3 49.8 28.8 39.7 18.6 27.1 18.6Zm0 32.8C21.5 51.4 17 46.9 17 41.3c0-5.6 4.5-10.1 10.1-10.1 5.6 0 10.1 4.5 10.1 10.1 0 5.6-4.5 10.1-10.1 10.1z"
36      />
37      <path
38        fill={colors.curve}
39        d="M18.3 16.9c-.2.1-.4.1-.6.1-1 0-1.9-.6-2.3-1.5l-4-8.7V7c-.1-.2-.2-.5-.2-.8 0-1 .6-1.8 1.4-2.3C16.8 1.2 21.9 0 27.1 0 45 0 59.6 14.5 59.6 32.5c0 9.5-4.1 18.1-10.7 24.1v0c-.1.1-.1.1-.2.1-.2 0-.3-.1-.3-.3 0-.1 0-.2.1-.2 3-4.3 4.6-9.5 4.6-14.8 0-14.3-11.6-26-26-26-3-.1-6 .5-8.8 1.5"
40      />
41    </svg>
42  );
43}