Files
endorphin-tabularium-docs/apps/docs/src/components/Icon.tsx
T
codex-bot 627c0ee887
Verify and deploy Tabularium / verify-and-deploy (pull_request) Has been cancelled
Refine documentation UI with distinct collection navigation and borderless surfaces
2026-10-28 15:31:25 +08:00

21 lines
1.2 KiB
TypeScript

import type { CSSProperties } from "react";
// One stroke style for controls and navigation; labels carry the meaning.
export function Icon({ name, size = 18, style }: {
name: "search" | "arrow" | "book" | "code" | "menu" | "close" | "layers" | "nodes" | "chevron";
size?: number; style?: CSSProperties;
}) {
const paths = {
layers: <><path d="m12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5M3 16l9 5 9-5" /></>,
nodes: <><circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="19" r="2" /><path d="M7 6h10M6 8l5 9m7-9-5 9" /></>,
chevron: <path d="m9 5 7 7-7 7" />,
search: <><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4 4" /></>,
arrow: <path d="M5 12h14m-6-6 6 6-6 6" />,
book: <><path d="M12 5c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V4c-3-1-6-1-9 1Z" /><path d="M12 5v15" /></>,
code: <path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16" />,
menu: <path d="M4 6h16M4 12h16M4 18h16" />,
close: <path d="m6 6 12 12M6 18 18 6" />,
};
return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={style}>{paths[name]}</svg>;
}