refactor(logo): vetorizar e separar LogoIcon/LogoText em arquivos próprios

Substitui as PNGs raster do componente Logo por SVGs inline e quebra
em dois subcomponentes reutilizáveis:

- LogoIcon (src/shared/components/logo-icon.tsx): SVG do ícone laranja
  (viewBox 0 0 200 200), aceita SVGProps via spread
- LogoText (src/shared/components/logo-text.tsx): SVG do wordmark
  (viewBox 0 0 574.201 89.6), fill #000 + dark:invert para alternar
  preto/branco conforme o tema
- Logo (orquestrador): mantém a API atual (variants full/compact/small,
  invertTextOnDark, colorIcon, iconClassName, textClassName) e agora
  renderiza os SVGs em vez de next/image

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/shared/components/logo-icon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function LogoIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 200 200"
+			role="img"
+			aria-label="OpenMonetis"
+			{...props}
+		>
+			<path
+				fill="#ff7733"
+				d="M 77.66,165.64 L 37.77,141.54 L 63.30,108.72 L 27.13,97.44 L 46.81,50.77 L 77.66,63.08 L 81.91,30.26 L 126.40,29.23 L 126.06,33.85 L 122.87,67.69 L 158.51,50.77 L 178.19,90.26 L 140.96,104.62 L 162.23,127.18 L 132.98,162.56 L 103.19,131.79 Z"
+			/>
+		</svg>
+	);
+}

src/shared/components/logo.tsx

@@ -1,4 +1,5 @@
-import Image from "next/image";
+import { LogoIcon } from "@/shared/components/logo-icon";
+import { LogoText } from "@/shared/components/logo-text";
 import { cn } from "@/shared/utils/ui";
 
 interface LogoProps {
@@ -27,75 +28,39 @@ export function Logo({
 	if (variant === "compact") {
 		return (
 			<div className={cn("flex items-center gap-1", className)}>
-				<div className="relative size-8 shrink-0">
-					<Image
-						src="/images/logo_small.png"
-						alt="OpenMonetis"
-						fill
-						sizes="32px"
-						className={cn(
-							"object-contain",
-							!colorIcon && iconFilterClass,
-							iconClassName,
-						)}
-						priority
-					/>
-				</div>
-				<div className="relative hidden h-8 w-[110px] shrink-0 sm:block">
-					<Image
-						src="/images/logo_text.png"
-						alt="OpenMonetis"
-						fill
-						sizes="110px"
-						className={cn(
-							"object-contain",
-							invertTextOnDark && "dark:invert",
-							textClassName,
-						)}
-						priority
-					/>
-				</div>
+				<LogoIcon
+					className={cn(
+						"size-8 shrink-0",
+						!colorIcon && iconFilterClass,
+						iconClassName,
+					)}
+				/>
+				<LogoText
+					className={cn(
+						"hidden h-auto w-[110px] shrink-0 sm:block",
+						invertTextOnDark && "dark:invert",
+						textClassName,
+					)}
+				/>
 			</div>
 		);
 	}
 
 	if (variant === "small") {
-		return (
-			<div className={cn("relative size-8 shrink-0", className)}>
-				<Image
-					src="/images/logo_small.png"
-					alt="OpenMonetis"
-					fill
-					sizes="32px"
-					className="object-contain"
-					priority
-				/>
-			</div>
-		);
+		return <LogoIcon className={cn("size-8 shrink-0", className)} />;
 	}
 
 	return (
 		<div className={cn("flex items-center gap-1.5 py-4", className)}>
-			<div className="relative size-7 shrink-0">
-				<Image
-					src="/images/logo_small.png"
-					alt="OpenMonetis"
-					fill
-					sizes="28px"
-					className={cn("object-contain", !colorIcon && iconFilterClass)}
-					priority
-				/>
-			</div>
-			<div className="relative h-8 w-[100px] shrink-0">
-				<Image
-					src="/images/logo_text.png"
-					alt="OpenMonetis"
-					fill
-					sizes="100px"
-					className={cn("object-contain", invertTextOnDark && "dark:invert")}
-					priority
-				/>
-			</div>
+			<LogoIcon
+				className={cn("size-7 shrink-0", !colorIcon && iconFilterClass)}
+			/>
+			<LogoText
+				className={cn(
+					"h-auto w-[100px] shrink-0",
+					invertTextOnDark && "dark:invert",
+				)}
+			/>
 		</div>
 	);
 }