34 lines
2.2 KiB
TypeScript
34 lines
2.2 KiB
TypeScript
export type IconName =
|
|
| 'home' | 'map' | 'layers' | 'calendar' | 'clipboard' | 'alert'
|
|
| 'history' | 'users' | 'shield' | 'audit' | 'logout' | 'menu'
|
|
| 'plus' | 'search' | 'edit' | 'chevron' | 'check' | 'key' | 'upload';
|
|
|
|
export function Icon({ name, size = 18 }: { name: IconName; size?: number }) {
|
|
const paths: Record<IconName, React.ReactNode> = {
|
|
home: <><path d="m3 10 9-7 9 7"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></>,
|
|
map: <><path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3Z"/><path d="M9 3v15M15 6v15"/></>,
|
|
layers: <><path d="m12 3-9 5 9 5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></>,
|
|
calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
|
|
clipboard: <><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V2h6v2M9 12h6M9 16h5"/></>,
|
|
alert: <><path d="M12 3 2.5 20h19Z"/><path d="M12 9v5M12 17h.01"/></>,
|
|
history: <><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5M12 7v5l3 2"/></>,
|
|
users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></>,
|
|
shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></>,
|
|
audit: <><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5M8 4V2M16 4V2"/></>,
|
|
logout: <><path d="M10 17l5-5-5-5M15 12H3"/><path d="M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5"/></>,
|
|
menu: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
|
|
plus: <><path d="M12 5v14M5 12h14"/></>,
|
|
search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></>,
|
|
edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z"/></>,
|
|
chevron: <path d="m9 18 6-6-6-6"/>,
|
|
check: <path d="m5 12 4 4L19 6"/>,
|
|
key: <><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M15 8l3 3M17 6l2 2"/></>,
|
|
upload: <><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></>,
|
|
};
|
|
return (
|
|
<svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
{paths[name]}
|
|
</svg>
|
|
);
|
|
}
|