65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
/**
|
||
* OAuth provider icons (Session 14) — inline SVGs, no external icon
|
||
* library. 18×18 to sit naturally to the left of the button label.
|
||
*
|
||
* Why inline: each icon is < 1 KB and we only ship three. Pulling in
|
||
* a library (react-icons, lucide) for this would be ~50 KB on the
|
||
* client bundle — bad trade. The marks are simplified, brand-safe
|
||
* versions (Google's multicolor G, the Apple silhouette, the X glyph).
|
||
*/
|
||
|
||
interface Props {
|
||
size?: number;
|
||
style?: React.CSSProperties;
|
||
}
|
||
|
||
export function GoogleIcon({ size = 18, style }: Props) {
|
||
return (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 48 48"
|
||
style={style}
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
>
|
||
<path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.6 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.5 29.3 4.5 24 4.5 13.2 4.5 4.5 13.2 4.5 24S13.2 43.5 24 43.5c11 0 19.5-8 19.5-19.5 0-1.2-.2-2.4-.4-3.5z" />
|
||
<path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 16 19 13 24 13c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.5 29.3 4.5 24 4.5 16.3 4.5 9.7 9.1 6.3 14.7z" />
|
||
<path fill="#4CAF50" d="M24 43.5c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 34.6 26.7 35.5 24 35.5c-5.2 0-9.6-3.3-11.3-8L6.2 32.4C9.5 38.4 16.2 43.5 24 43.5z" />
|
||
<path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.4-4.1 5.7l6.2 5.2c-.4.4 6.6-4.8 6.6-14.9 0-1.2-.2-2.4-.4-3.5z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export function AppleIcon({ size = 18, style }: Props) {
|
||
return (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
style={style}
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
fill="currentColor"
|
||
>
|
||
<path d="M17.05 12.04c-.03-2.81 2.3-4.16 2.4-4.22-1.31-1.91-3.34-2.17-4.06-2.2-1.73-.18-3.37 1.02-4.25 1.02-.88 0-2.23-.99-3.66-.96-1.88.03-3.62 1.09-4.59 2.78-1.96 3.4-.5 8.42 1.41 11.18.93 1.35 2.04 2.86 3.5 2.81 1.4-.06 1.93-.91 3.62-.91 1.68 0 2.16.91 3.64.88 1.5-.03 2.46-1.37 3.38-2.73 1.07-1.57 1.51-3.09 1.53-3.17-.03-.01-2.93-1.13-2.96-4.48zM14.43 4.3c.77-.94 1.29-2.24 1.15-3.54-1.11.05-2.46.74-3.26 1.67-.72.83-1.35 2.15-1.18 3.43 1.24.1 2.51-.63 3.29-1.56z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export function XIcon({ size = 18, style }: Props) {
|
||
return (
|
||
<svg
|
||
width={size}
|
||
height={size}
|
||
viewBox="0 0 24 24"
|
||
style={style}
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
fill="currentColor"
|
||
>
|
||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817-5.965 6.817H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.16 17.52h1.833L7.084 4.126H5.117l11.967 15.644z" />
|
||
</svg>
|
||
);
|
||
}
|