AlbyHubLogo.tsx raw
1 import { SVGAttributes } from "react";
2 import { cn } from "src/lib/utils";
3
4 interface AlbyHubLogoProps extends SVGAttributes<SVGElement> {
5 monochrome?: boolean;
6 }
7
8 export function AlbyHubLogo({
9 monochrome = false,
10 className,
11 style,
12 ...props
13 }: AlbyHubLogoProps) {
14 return (
15 <svg
16 data-slot="hub-logo"
17 role="img"
18 aria-label="Alby Hub"
19 xmlns="http://www.w3.org/2000/svg"
20 viewBox="0 0 137 32"
21 fill="none"
22 className={cn("w-auto shrink-0", className)}
23 style={
24 monochrome
25 ? ({
26 "--logo-ink": "currentColor",
27 "--logo-accent": "currentColor",
28 ...style,
29 } as React.CSSProperties)
30 : style
31 }
32 {...props}
33 >
34 {/* Ink paths */}
35 <g fill="var(--logo-ink, currentColor)">
36 <path d="M45.4002 24.3324C43.6869 24.3324 42.3592 23.9518 41.4169 23.1902C40.4746 22.429 40.0034 21.3533 40.0034 19.9635C40.0034 18.4787 40.5031 17.3464 41.5025 16.5656C42.5019 15.7852 43.8962 15.3949 45.6857 15.3949H49.512V17.8505H46.7137C45.4381 17.8505 44.5436 18.0268 44.0296 18.3788C43.5156 18.7312 43.2586 19.2309 43.2586 19.8779C43.2586 20.4302 43.4821 20.863 43.9296 21.1771C44.3767 21.4912 45.0004 21.6483 45.8 21.6483C46.5232 21.6483 47.1514 21.4867 47.6845 21.1628C48.2173 20.8394 48.6313 20.411 48.9267 19.8779C49.2216 19.3452 49.3693 18.7455 49.3693 18.079H50.3116C50.3116 20.0207 49.9212 21.5483 49.1408 22.6619C48.36 23.7756 47.1135 24.3324 45.4002 24.3324ZM49.512 23.9897L49.3693 21.3056V16.6512C49.3693 15.6804 49.2693 14.8666 49.0695 14.2098C48.8696 13.5531 48.5456 13.0489 48.0986 12.6965C47.6511 12.3444 47.0564 12.1682 46.3139 12.1682C45.6286 12.1682 45.029 12.311 44.515 12.5965C44.001 12.8821 43.5629 13.3296 43.2015 13.9386L40.4032 12.9106C40.7075 12.2824 41.1121 11.6971 41.6168 11.1545C42.1209 10.612 42.7589 10.1792 43.5299 9.8553C44.3009 9.53183 45.2289 9.36987 46.3139 9.36987C47.7033 9.36987 48.8646 9.64114 49.7976 10.1837C50.7301 10.7262 51.4203 11.5021 51.8678 12.5108C52.3148 13.5201 52.5388 14.7381 52.5388 16.1658L52.4531 23.9897H49.512Z" />
37 <path d="M55.0513 23.9898V4.00171H58.2494V23.9898H55.0513Z" />
38 <path d="M61.0762 23.9898V4.00171H64.2743V21.3342L64.1029 23.9898H61.0762ZM68.7859 24.3324C67.5866 24.3324 66.5537 24.0228 65.6877 23.4044C64.8212 22.786 64.16 21.9151 63.7032 20.7917C63.2463 19.6687 63.0179 18.3552 63.0179 16.8512C63.0179 15.3284 63.2463 14.01 63.7032 12.8964C64.16 11.7828 64.8212 10.9168 65.6877 10.2979C66.5537 9.67956 67.5866 9.36993 68.7859 9.36993C70.0802 9.36993 71.2081 9.67956 72.1695 10.2979C73.1306 10.9168 73.8828 11.7828 74.4253 12.8964C74.9679 14.01 75.2391 15.3284 75.2391 16.8512C75.2391 18.3552 74.9679 19.6687 74.4253 20.7917C73.8828 21.9151 73.1306 22.786 72.1695 23.4044C71.2081 24.0228 70.0802 24.3324 68.7859 24.3324ZM67.9863 21.4199C68.7475 21.4199 69.4234 21.2249 70.0137 20.8345C70.6035 20.4446 71.0747 19.9065 71.4271 19.2212C71.7792 18.5359 71.9554 17.7462 71.9554 16.8512C71.9554 15.9566 71.7885 15.1665 71.4557 14.4812C71.1224 13.7959 70.6606 13.2631 70.0708 12.8821C69.4805 12.5016 68.7952 12.311 68.0149 12.311C67.2912 12.311 66.6443 12.5016 66.0732 12.8821C65.5021 13.2631 65.0595 13.7959 64.7454 14.4812C64.4313 15.1665 64.2743 15.9566 64.2743 16.8512C64.2743 17.7462 64.4313 18.5359 64.7454 19.2212C65.0595 19.9065 65.4972 20.4446 66.0589 20.8345C66.6202 21.2249 67.2627 21.4199 67.9863 21.4199Z" />
39 <path d="M81.5207 23.9898L75.1245 9.71265H78.6081L83.5766 21.734L84.6046 23.9898H81.5207ZM78.9794 30.0434C78.5225 30.0434 78.013 29.9577 77.4517 29.7864C76.89 29.615 76.3523 29.396 75.8384 29.1296L77.0377 26.5312C77.399 26.7025 77.7323 26.8404 78.0371 26.9452C78.3413 27.0496 78.589 27.1023 78.7795 27.1023C79.2363 27.1023 79.6218 26.9831 79.9359 26.7453C80.25 26.5071 80.5021 26.16 80.6926 25.7031L82.3773 21.7626L87.203 9.71265H90.6866L84.062 25.5032C83.6623 26.417 83.2576 27.2165 82.8485 27.9018C82.4389 28.5871 81.9298 29.1153 81.3208 29.4865C80.7113 29.8578 79.931 30.0434 78.9794 30.0434Z" />
40 <path d="M11.0503 11.9498C8.31658 9.21608 8.31658 4.78392 11.0503 2.05025C13.7839 -0.683417 18.2161 -0.683417 20.9498 2.05025C23.6834 4.78392 23.6834 9.21608 20.9498 11.9498L16 16.8995L11.0503 11.9498Z" />
41 </g>
42 {/* Accent paths */}
43 <g fill="var(--logo-accent, currentColor)">
44 <path d="M91.9146 23.9898V4.00171H95.1126V23.9898H91.9146ZM101.594 16.6799C101.594 15.5377 101.461 14.6574 101.195 14.0386C100.928 13.4202 100.562 12.987 100.095 12.7393C99.6287 12.4922 99.0911 12.3681 98.482 12.3681C97.397 12.3494 96.564 12.7014 95.9836 13.4247C95.4027 14.1483 95.1126 15.1857 95.1126 16.5371H93.8848C93.8848 15.0335 94.1083 13.7437 94.5558 12.668C95.0029 11.5927 95.636 10.774 96.4547 10.2123C97.273 9.65101 98.2438 9.36993 99.3672 9.36993C100.49 9.36993 101.461 9.59837 102.28 10.0552C103.098 10.5121 103.722 11.2215 104.15 12.1825C104.578 13.144 104.793 14.3955 104.793 15.9374V16.6799H101.594ZM101.594 23.9898V16.6799H104.793V23.9898H101.594Z" />
45 <path d="M106.991 17.0226V9.71265H110.189V17.0226H106.991ZM110.189 17.0226C110.189 18.146 110.322 19.0214 110.589 19.6496C110.855 20.2778 111.221 20.7159 111.688 20.9631C112.154 21.2107 112.692 21.3343 113.301 21.3343C114.386 21.3535 115.224 21.0014 115.814 20.2778C116.404 19.5545 116.699 18.5172 116.699 17.1653H117.898C117.898 18.6693 117.675 19.9592 117.227 21.0345C116.78 22.1101 116.152 22.9289 115.343 23.4901C114.534 24.0514 113.558 24.3325 112.416 24.3325C111.293 24.3325 110.327 24.1041 109.518 23.6472C108.708 23.1903 108.085 22.4765 107.647 21.5056C107.209 20.5348 106.991 19.2882 106.991 17.765V17.0226H110.189ZM116.871 23.9898L116.699 21.3628V9.71265H119.869V23.9898H116.871Z" />
46 <path d="M122.696 23.9898V4.00171H125.894V21.3342L125.723 23.9898H122.696ZM130.405 24.3324C129.206 24.3324 128.173 24.0228 127.307 23.4044C126.441 22.786 125.78 21.9151 125.323 20.7917C124.866 19.6687 124.637 18.3552 124.637 16.8512C124.637 15.3284 124.866 14.01 125.323 12.8964C125.78 11.7828 126.441 10.9168 127.307 10.2979C128.173 9.67956 129.206 9.36993 130.405 9.36993C131.7 9.36993 132.828 9.67956 133.789 10.2979C134.75 10.9168 135.502 11.7828 136.045 12.8964C136.587 14.01 136.859 15.3284 136.859 16.8512C136.859 18.3552 136.587 19.6687 136.045 20.7917C135.502 21.9151 134.75 22.786 133.789 23.4044C132.828 24.0228 131.7 24.3324 130.405 24.3324ZM129.606 21.4199C130.367 21.4199 131.043 21.2249 131.633 20.8345C132.223 20.4446 132.694 19.9065 133.047 19.2212C133.399 18.5359 133.575 17.7462 133.575 16.8512C133.575 15.9566 133.408 15.1665 133.075 14.4812C132.742 13.7959 132.28 13.2631 131.69 12.8821C131.1 12.5016 130.415 12.311 129.635 12.311C128.911 12.311 128.264 12.5016 127.693 12.8821C127.122 13.2631 126.679 13.7959 126.365 14.4812C126.051 15.1665 125.894 15.9566 125.894 16.8512C125.894 17.7462 126.051 18.5359 126.365 19.2212C126.679 19.9065 127.117 20.4446 127.679 20.8345C128.24 21.2249 128.882 21.4199 129.606 21.4199Z" />
47 <path d="M5.61976 9.61925C5.62056 9.62084 5.62142 9.62244 5.62232 9.62405C5.62144 9.62245 5.6206 9.62085 5.61976 9.61925ZM5.59348 9.57048C5.59352 9.57056 5.59356 9.57063 5.59356 9.57067C5.59364 9.57075 5.59372 9.57088 5.59376 9.57096C5.59368 9.5708 5.59356 9.57064 5.59348 9.57048ZM31.8289 25.6315C31.5277 23.8162 30.4637 21.4247 29.3018 19.4841C28.4315 20.6058 27.527 21.6566 26.5192 22.6713C27.127 23.7602 28.0453 25.9966 28.0063 27.1955C27.9929 27.6081 27.6679 27.9411 27.2564 27.9677C25.9616 28.0514 24.2118 27.2884 22.7485 26.5596C21.6522 27.5611 20.5896 28.4755 19.4884 29.3204C21.7719 30.6747 24.7106 31.9994 27.1063 31.9928C30.5974 32.1778 32.621 28.888 31.8289 25.6315ZM20.9966 22.7345C25.4043 18.3305 30.4088 12.6253 31.8291 6.37222C32.8448 1.27702 28.7877 -1.1077 24.2484 0.493562C25.095 1.6065 25.7053 2.85092 26.0794 4.15351C26.4266 4.0727 26.8671 4.01427 27.2393 4.0275C27.6527 4.0422 27.9871 4.37303 28.0058 4.7866C28.0616 6.02288 27.0628 8.39781 26.3972 9.56196C26.3972 9.562 26.3972 9.56204 26.3972 9.56208L26.397 9.5624C23.8992 14.1348 20.0294 18.3961 15.9958 21.8707L15.9949 21.8699C14.9403 22.7757 13.8902 23.6058 12.7779 24.3761C12.7795 24.3775 12.7811 24.3789 12.7827 24.3803C10.7454 25.7925 7.10482 28.0817 4.73415 27.9541C4.31885 27.9318 3.9892 27.5934 3.97944 27.1772C3.95152 25.9871 4.842 23.8023 5.43479 22.7327C4.48658 21.693 3.57595 20.614 2.68953 19.4752C-2.22383 27.0765 -0.401821 35.12 9.78137 30.7347C13.8012 28.9161 17.6534 25.9024 20.9966 22.7345ZM10.1129 16.0018C8.24018 13.797 6.88531 11.9183 5.61221 9.60526H5.61217C5.61216 9.60515 5.61209 9.60508 5.61205 9.60494H5.61201C5.612 9.60481 5.61184 9.60473 5.61185 9.60458C5.61185 9.60458 5.61181 9.60458 5.61181 9.60454C5.60595 9.59374 5.59949 9.58163 5.59356 9.57067C5.59364 9.57075 5.59372 9.57088 5.59376 9.57096C4.93372 8.42201 3.93117 6.04043 3.97963 4.79708C3.99595 4.37841 4.33214 4.04383 4.75048 4.02891C5.11894 4.01577 5.55326 4.07079 5.89699 4.15139C6.27133 2.8486 6.88207 1.60398 7.72923 0.491002C3.19065 -1.10314 -0.856747 1.27726 0.157312 6.37224C0.99235 10.8772 4.71953 15.7888 7.61852 19.197C7.62347 19.19 7.61352 19.2041 7.61852 19.197C8.3302 20.0077 9.07123 20.8231 9.85121 21.6134C10.9204 20.8474 11.9745 20.0289 13.0316 19.1424C11.9952 18.1125 11.0167 17.0598 10.1129 16.0018ZM5.68239 9.7357C5.68578 9.74198 5.68926 9.74842 5.69277 9.75501C5.68934 9.74866 5.68586 9.74222 5.68239 9.7357ZM5.82961 10.0093C5.83333 10.0161 5.83696 10.0229 5.84056 10.0296C5.83696 10.023 5.83333 10.0162 5.82961 10.0093ZM5.61205 9.60494C5.61201 9.6049 5.61197 9.60482 5.61193 9.60478C5.61197 9.60482 5.61201 9.6049 5.61201 9.60494C5.61209 9.60506 5.61213 9.60514 5.61217 9.60522C5.61213 9.60514 5.61209 9.60506 5.61205 9.60494ZM5.61976 9.61925C5.62056 9.62084 5.62142 9.62244 5.62232 9.62405C5.62144 9.62245 5.6206 9.62085 5.61976 9.61925Z" />
48 </g>
49 </svg>
50 );
51 }
52