142 lines
3.8 KiB
TypeScript
142 lines
3.8 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
/** Line icons on a 24 px grid, drawn in `currentColor` (CR-005). */
|
|
const PATHS = {
|
|
hq: (
|
|
<>
|
|
<path d="M3 21h18M5 21V9l7-5 7 5v12" />
|
|
<path d="M9.5 21v-5h5v5M9 11.5h.01M15 11.5h.01" />
|
|
</>
|
|
),
|
|
map: (
|
|
<>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<ellipse cx="12" cy="12" rx="10" ry="4.5" transform="rotate(-25 12 12)" />
|
|
<circle cx="20" cy="7.5" r="1" fill="currentColor" />
|
|
</>
|
|
),
|
|
jobs: (
|
|
<>
|
|
<rect x="5" y="4" width="14" height="17" rx="2" />
|
|
<path d="M9 4V2.5h6V4M8.5 10h7M8.5 14h7M8.5 18h4" />
|
|
</>
|
|
),
|
|
fleet: (
|
|
<>
|
|
<path d="M12 2.5c3 2 5 6 5 10l-1.6 3.5H8.6L7 12.5c0-4 2-8 5-10z" />
|
|
<circle cx="12" cy="10" r="1.8" />
|
|
<path d="M8.6 16 6 18.5V14l1.3-2.5M15.4 16l2.6 2.5V14l-1.3-2.5M10.5 19l1.5 2.5 1.5-2.5" />
|
|
</>
|
|
),
|
|
pilots: (
|
|
<>
|
|
<path d="M6 11a6 6 0 0 1 12 0v2H6v-2z" />
|
|
<path d="M8 13v1.5a4 4 0 0 0 8 0V13M4 21c1.2-2.6 4.2-4 8-4s6.8 1.4 8 4" />
|
|
</>
|
|
),
|
|
market: (
|
|
<>
|
|
<path d="M5 8h14l-1.2 13H6.2L5 8z" />
|
|
<path d="M9 10V6.5a3 3 0 0 1 6 0V10" />
|
|
</>
|
|
),
|
|
places: (
|
|
<>
|
|
<circle cx="12" cy="12" r="6" />
|
|
<path d="M5.2 15.6c-2.3 2-3 3.6-2.2 4.3 1.3 1.1 6.4-1.1 11-5s7.6-8.2 6.4-9.4c-.7-.7-2.4-.3-4.6 1" />
|
|
</>
|
|
),
|
|
credits: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M14.8 9.4A3 3 0 0 0 12 7.8c-2 0-3.3 1.6-3.3 4.2s1.3 4.2 3.3 4.2a3 3 0 0 0 2.8-1.6" />
|
|
</>
|
|
),
|
|
clock: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 7v5l3 2" />
|
|
</>
|
|
),
|
|
fuel: <path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z" />,
|
|
cargo: (
|
|
<>
|
|
<path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9z" />
|
|
<path d="M3 7.5 12 12l9-4.5M12 12v9" />
|
|
</>
|
|
),
|
|
arrow: <path d="M4 12h15M14 6l6 6-6 6" />,
|
|
lock: (
|
|
<>
|
|
<rect x="5" y="11" width="14" height="10" rx="2" />
|
|
<path d="M8 11V7.5a4 4 0 0 1 8 0V11" />
|
|
</>
|
|
),
|
|
check: <path d="M5 12.5 9.5 17 19 7" />,
|
|
bolt: <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" />,
|
|
rest: <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" />,
|
|
alert: (
|
|
<>
|
|
<path d="M12 3 22 21H2L12 3z" />
|
|
<path d="M12 10v5M12 18v.01" />
|
|
</>
|
|
),
|
|
close: <path d="M6 6l12 12M18 6 6 18" />,
|
|
gear: (
|
|
<>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1" />
|
|
</>
|
|
),
|
|
plus: <path d="M12 5v14M5 12h14" />,
|
|
target: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<circle cx="12" cy="12" r="5" />
|
|
<circle cx="12" cy="12" r="1" fill="currentColor" />
|
|
</>
|
|
),
|
|
send: <path d="M3 11 21 3l-8 18-2-8-8-2z" />,
|
|
hire: (
|
|
<>
|
|
<circle cx="10" cy="8" r="4" />
|
|
<path d="M2.5 21c1-3.8 3.9-6 7.5-6 1.8 0 3.4.5 4.7 1.4M19 14v6M16 17h6" />
|
|
</>
|
|
),
|
|
route: (
|
|
<>
|
|
<circle cx="5" cy="18" r="2.5" />
|
|
<circle cx="19" cy="6" r="2.5" />
|
|
<path d="M7 16.5C12 14 9 9 17 7.5" strokeDasharray="2 2.5" />
|
|
</>
|
|
),
|
|
speed: <path d="M3 17a9 9 0 0 1 18 0M12 17l4-6M7 13.5h.01M12 10h.01M17 13.5h.01" />,
|
|
range: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" strokeDasharray="2.5 2.5" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
</>
|
|
),
|
|
landing: <path d="M12 3v11M7.5 9.5 12 14l4.5-4.5M4 20h16M6 17h12" />,
|
|
star: <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z" />,
|
|
} satisfies Record<string, ReactNode>;
|
|
|
|
export type IconName = keyof typeof PATHS;
|
|
|
|
export function Icon({ name, className = "size-5" }: { name: IconName; className?: string }) {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.8}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={className}
|
|
>
|
|
{PATHS[name]}
|
|
</svg>
|
|
);
|
|
}
|