49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
|
import React from 'react';
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
// AtlasIcon — SVG recreation of the Atlas InfoSec logo icon.
|
||
|
|
// A rounded badge/card shape with a globe (crosshair grid) inside.
|
||
|
|
// Accepts the same props as lucide-react icons: style, width, height, color.
|
||
|
|
// ⚠️ CONVENTION: Uses raw SVG instead of lucide-react. Acceptable here because
|
||
|
|
// this is a custom brand icon (Atlas InfoSec logo) with no lucide-react equivalent.
|
||
|
|
// ---------------------------------------------------------------------------
|
||
|
|
export default function AtlasIcon({ style, width, height, color, ...props }) {
|
||
|
|
const w = width || (style && style.width) || 24;
|
||
|
|
const h = height || (style && style.height) || 24;
|
||
|
|
const c = color || (style && style.color) || 'currentColor';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
width={w}
|
||
|
|
height={h}
|
||
|
|
fill="none"
|
||
|
|
stroke={c}
|
||
|
|
strokeWidth="1.75"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
style={{ ...style, width: w, height: h, flexShrink: 0 }}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{/* Badge / card outline — rounded rectangle */}
|
||
|
|
<rect x="3" y="2" width="18" height="20" rx="3" ry="3" />
|
||
|
|
|
||
|
|
{/* Globe circle */}
|
||
|
|
<circle cx="12" cy="11" r="5.5" />
|
||
|
|
|
||
|
|
{/* Globe horizontal line */}
|
||
|
|
<line x1="6.5" y1="11" x2="17.5" y2="11" />
|
||
|
|
|
||
|
|
{/* Globe vertical line */}
|
||
|
|
<line x1="12" y1="5.5" x2="12" y2="16.5" />
|
||
|
|
|
||
|
|
{/* Globe left meridian arc */}
|
||
|
|
<path d="M9.5 5.8C8.6 7.3 8 9 8 11s0.6 3.7 1.5 5.2" />
|
||
|
|
|
||
|
|
{/* Globe right meridian arc */}
|
||
|
|
<path d="M14.5 5.8C15.4 7.3 16 9 16 11s-0.6 3.7-1.5 5.2" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|