registry/default/blocks/logos/stytch-logo/components/logos/stytch.tsx
interface LogoProps {
className?: string;
variant?: "icon" | "wordmark";
mode?: "dark" | "light";
}
const COLORS = {
dark: "#FFFFFF",
light: "#1D1D1D",
};
export function StytchLogo({
className,
variant = "icon",
mode = "dark",
}: LogoProps) {
const color = COLORS[mode];
if (variant === "wordmark") {
return (
<svg
role="img"
viewBox="0 0 47 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Stytch</title>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M3.57724 9.09191C3.57724 9.96357 3.94583 10.3612 4.98388 10.6088L4.98195 10.6108L6.34119 10.9397C8.34087 11.4312 9.23381 12.4141 9.23381 14.1235C9.23381 16.4115 7.67625 17.7233 5.15028 17.7233C2.62432 17.7233 1.18962 16.5653 1 14.3702H3.1864C3.32571 15.4721 4.01548 16.0313 5.15028 16.0313C6.28508 16.0313 7.01936 15.417 7.01936 14.467C7.01936 13.5711 6.56563 13.1203 5.40472 12.8601L4.03193 12.5456C2.81297 12.2544 1.36182 11.465 1.36182 9.34635C1.36182 7.34473 2.89617 6 5.18027 6C7.63755 6 8.90972 6.97614 9.06741 8.98066H6.79105C6.68269 8.09449 6.14577 7.66205 5.15125 7.66205C4.22445 7.66205 3.57724 8.21929 3.57724 9.08998V9.09191ZM35.5334 11.9391C35.3709 11.109 34.834 10.722 33.8511 10.722H33.7089C32.4183 10.722 31.5824 11.7407 31.5824 13.3148C31.5824 14.8888 32.4164 15.9075 33.7089 15.9075H33.8511C34.834 15.9075 35.369 15.5205 35.5334 14.6904H37.6821C37.4838 16.6466 36.1013 17.7204 33.7805 17.7204C31.3222 17.7204 29.605 15.9084 29.605 13.3148C29.605 10.7211 31.3212 8.90907 33.7805 8.90907C36.1013 8.90907 37.4838 9.98485 37.6821 11.9391H35.5334ZM27.0229 14.8414V10.6679H29.2993V8.89843H27.8201C27.3799 8.89843 27.021 8.54338 27.021 8.10707V6.00097H24.854V8.90036H23.0507C22.2903 8.90036 21.6063 9.35602 21.3083 10.0613L19.4344 14.5018L17.4367 10.0255C17.1319 9.34054 16.4538 8.89843 15.7098 8.89843H13.1151C12.674 8.89843 12.316 8.54338 12.316 8.10707V6.00097H10.149V15.4702C10.149 16.9426 10.9268 17.7224 12.3983 17.7224H14.457V15.9113H13.3841C12.5357 15.9113 12.316 15.6917 12.316 14.8414V10.6679H14.9581C15.2019 10.6679 15.3818 10.7675 15.4679 10.9465L18.3838 17.0926V17.5444C18.3838 18.4112 18.1448 18.4489 17.3157 18.4489H14.5934V20.2928H18.1932C19.5805 20.2928 20.4425 19.3051 20.4425 17.7166L20.4502 16.9881L23.2461 10.9523C23.3312 10.7685 23.5131 10.6688 23.7588 10.6688H24.853V15.4692C24.853 16.9417 25.6308 17.7214 27.1023 17.7214H29.2229V15.9104H28.0881C27.2396 15.9104 27.02 15.6908 27.02 14.8404L27.0229 14.8423V14.8414ZM40.7382 10.0651L40.8843 9.88617H40.8824C41.3883 9.26895 41.903 8.91004 43.0446 8.91004C44.9746 8.91004 46.0833 10.1222 46.0833 12.238V17.7214H43.9162V12.5079C43.9162 11.853 43.7295 11.3315 43.3754 10.9997C43.09 10.7307 42.7069 10.605 42.2677 10.6311C41.2239 10.6969 40.7382 11.5076 40.7382 13.1861V17.7214H38.5712V6.00097H40.7382V10.0651Z"
fill={color}
/>
</svg>
);
}
return (
<svg
role="img"
viewBox="0 0 47 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Stytch</title>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M3.57724 9.09191C3.57724 9.96357 3.94583 10.3612 4.98388 10.6088L4.98195 10.6108L6.34119 10.9397C8.34087 11.4312 9.23381 12.4141 9.23381 14.1235C9.23381 16.4115 7.67625 17.7233 5.15028 17.7233C2.62432 17.7233 1.18962 16.5653 1 14.3702H3.1864C3.32571 15.4721 4.01548 16.0313 5.15028 16.0313C6.28508 16.0313 7.01936 15.417 7.01936 14.467C7.01936 13.5711 6.56563 13.1203 5.40472 12.8601L4.03193 12.5456C2.81297 12.2544 1.36182 11.465 1.36182 9.34635C1.36182 7.34473 2.89617 6 5.18027 6C7.63755 6 8.90972 6.97614 9.06741 8.98066H6.79105C6.68269 8.09449 6.14577 7.66205 5.15125 7.66205C4.22445 7.66205 3.57724 8.21929 3.57724 9.08998V9.09191ZM35.5334 11.9391C35.3709 11.109 34.834 10.722 33.8511 10.722H33.7089C32.4183 10.722 31.5824 11.7407 31.5824 13.3148C31.5824 14.8888 32.4164 15.9075 33.7089 15.9075H33.8511C34.834 15.9075 35.369 15.5205 35.5334 14.6904H37.6821C37.4838 16.6466 36.1013 17.7204 33.7805 17.7204C31.3222 17.7204 29.605 15.9084 29.605 13.3148C29.605 10.7211 31.3212 8.90907 33.7805 8.90907C36.1013 8.90907 37.4838 9.98485 37.6821 11.9391H35.5334ZM27.0229 14.8414V10.6679H29.2993V8.89843H27.8201C27.3799 8.89843 27.021 8.54338 27.021 8.10707V6.00097H24.854V8.90036H23.0507C22.2903 8.90036 21.6063 9.35602 21.3083 10.0613L19.4344 14.5018L17.4367 10.0255C17.1319 9.34054 16.4538 8.89843 15.7098 8.89843H13.1151C12.674 8.89843 12.316 8.54338 12.316 8.10707V6.00097H10.149V15.4702C10.149 16.9426 10.9268 17.7224 12.3983 17.7224H14.457V15.9113H13.3841C12.5357 15.9113 12.316 15.6917 12.316 14.8414V10.6679H14.9581C15.2019 10.6679 15.3818 10.7675 15.4679 10.9465L18.3838 17.0926V17.5444C18.3838 18.4112 18.1448 18.4489 17.3157 18.4489H14.5934V20.2928H18.1932C19.5805 20.2928 20.4425 19.3051 20.4425 17.7166L20.4502 16.9881L23.2461 10.9523C23.3312 10.7685 23.5131 10.6688 23.7588 10.6688H24.853V15.4692C24.853 16.9417 25.6308 17.7214 27.1023 17.7214H29.2229V15.9104H28.0881C27.2396 15.9104 27.02 15.6908 27.02 14.8404L27.0229 14.8423V14.8414ZM40.7382 10.0651L40.8843 9.88617H40.8824C41.3883 9.26895 41.903 8.91004 43.0446 8.91004C44.9746 8.91004 46.0833 10.1222 46.0833 12.238V17.7214H43.9162V12.5079C43.9162 11.853 43.7295 11.3315 43.3754 10.9997C43.09 10.7307 42.7069 10.605 42.2677 10.6311C41.2239 10.6969 40.7382 11.5076 40.7382 13.1861V17.7214H38.5712V6.00097H40.7382V10.0651Z"
fill={color}
/>
</svg>
);
}
Stytch logo with icon and wordmark variants and dark/light modes.
