43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
/**
|
||
|
|
* Inline SVG brand mark for FlatRender.
|
||
|
|
*
|
||
|
|
* Icon meaning:
|
||
|
|
* • Blue rounded square = the platform
|
||
|
|
* • White play triangle = video / rendering
|
||
|
|
* • Three stacked bars = flat-design layers / composition
|
||
|
|
*
|
||
|
|
* Rendered inline so it works without a network request and
|
||
|
|
* inherits the correct colour in both light and dark contexts.
|
||
|
|
*/
|
||
|
|
|
||
|
|
interface LogoMarkProps {
|
||
|
|
/** Pixel size of the square icon (default 36) */
|
||
|
|
size?: number;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function LogoMark({ size = 36, className }: LogoMarkProps) {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
width={size}
|
||
|
|
height={size}
|
||
|
|
viewBox="0 0 40 40"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
aria-hidden
|
||
|
|
className={className}
|
||
|
|
>
|
||
|
|
{/* Blue rounded background */}
|
||
|
|
<rect width="40" height="40" rx="9" fill="#2563EB" />
|
||
|
|
|
||
|
|
{/* Play triangle */}
|
||
|
|
<path d="M12 12.5L12 27.5L24.5 20L12 12.5Z" fill="white" />
|
||
|
|
|
||
|
|
{/* Flat-design layer bars (decreasing width, right side) */}
|
||
|
|
<rect x="27" y="13" width="7" height="2.5" rx="1.25" fill="white" fillOpacity="0.9" />
|
||
|
|
<rect x="27" y="18.75" width="5.5" height="2.5" rx="1.25" fill="white" fillOpacity="0.75" />
|
||
|
|
<rect x="27" y="24.5" width="4" height="2.5" rx="1.25" fill="white" fillOpacity="0.6" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|