/ proof-of-concept / takes
Sign in
proof-of-concept / takes
takes / src / components / Icon.tsx
54 lines · 2.7 KBBlameHistoryRaw
1// Small stroke icons (24x24 viewBox).
3const PATHS: Record<string, string> = {
4 plus: 'M12 5v14M5 12h14',
5 trash: 'M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6',
6 back: 'M15 18l-6-6 6-6',
7 play: 'M7 4.5v15l12-7.5z',
8 pause: 'M8 5v14M16 5v14',
9 stop: 'M6 6h12v12H6z',
10 record: 'M12 12m-6 0a6 6 0 1 0 12 0a6 6 0 1 0-12 0',
11 scissors: 'M6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM20 4L8.1 15.9M14.5 14.5L20 20M8.1 8.1L12 12',
12 split: 'M12 3v18M8 7l-4 5 4 5M16 7l4 5-4 5',
13 undo: 'M9 14L4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3',
14 redo: 'M15 14l5-5-5-5M20 9H9a5 5 0 0 0 0 10h3',
15 folder: 'M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z',
16 camera: 'M3 7h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zM15 11l6-3v8l-6-3',
17 screen: 'M3 4h18v12H3zM8 20h8M12 16v4',
18 mic: 'M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3',
19 grip: 'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01',
20 settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
21 image: 'M4 5h16v14H4zM4 16l5-5 4 4 2-2 5 5M15.5 9.5h.01',
22 film: 'M4 4h16v16H4zM8 4v16M16 4v16M4 9h4M4 15h4M16 9h4M16 15h4',
23 left: 'M14 7l-5 5 5 5',
24 right: 'M10 7l5 5-5 5',
25 popout: 'M14 4h6v6M20 4l-8 8M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
26 text: 'M4 6h16M4 12h16M4 18h10',
27 check: 'M5 12l5 5 9-10',
28 x: 'M6 6l12 12M18 6L6 18',
29 external: 'M14 4h6v6M20 4l-9 9M19 14v5H5V5h5',
30 trimStart: 'M5 4v16M9 12h10M13 8l-4 4 4 4',
31 trimEnd: 'M19 4v16M15 12H5M11 8l4 4-4 4',
32 crop: 'M6 2v14a2 2 0 0 0 2 2h14M18 22V8a2 2 0 0 0-2-2H2',
33 speaker: 'M11 5L6 9H3v6h3l5 4zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13',
34};
36export function Icon({ name, size = 16, className }: { name: keyof typeof PATHS | string; size?: number; className?: string }) {
37 const filled = name === 'play' || name === 'record' || name === 'stop';
38 return (
39 <svg
40 className={className}
41 width={size}
42 height={size}
43 viewBox="0 0 24 24"
44 fill={filled ? 'currentColor' : 'none'}
45 stroke="currentColor"
46 strokeWidth={name === 'grip' ? 3 : 2}
47 strokeLinecap="round"
48 strokeLinejoin="round"
49 aria-hidden="true"
50 >
51 <path d={PATHS[name] ?? ''} />
52 </svg>
53 );
↑↓ move↵openescclose