21 lines
1.2 KiB
TypeScript
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>;
|
|
}
|