icons.jsx
3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Tiny inline SVG icons. All sized via currentColor.
const Ic = {};
const make = (name, paths, vb = "0 0 16 16") => {
Ic[name] = ({ size = 14, color, style, ...rest }) => (
<svg
width={size}
height={size}
viewBox={vb}
fill="none"
stroke={color || "currentColor"}
strokeWidth="1.4"
strokeLinecap="round"
strokeLinejoin="round"
style={{ flex: "none", display: "inline-block", verticalAlign: "-2px", ...style }}
{...rest}
>
{paths}
</svg>
);
};
make("plus", <><path d="M8 3v10M3 8h10" /></>);
make("edit", <><path d="M11.5 2.5l2 2-8 8H3.5v-2l8-8z" /></>);
make("trash", <><path d="M3 4.5h10M6 4.5V3a1 1 0 011-1h2a1 1 0 011 1v1.5M5 4.5v8a1 1 0 001 1h4a1 1 0 001-1v-8" /></>);
make("save", <><path d="M3 3h8l2 2v8H3V3z" /><path d="M5 3v3h5V3M5 13v-4h6v4" /></>);
make("cancel", <><circle cx="8" cy="8" r="5.5" /><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" /></>);
make("refresh", <><path d="M13 4v3h-3M3 12V9h3" /><path d="M3.5 7a4.5 4.5 0 018-1.5M12.5 9a4.5 4.5 0 01-8 1.5" /></>);
make("export", <><path d="M8 2v8M5 6.5L8 9.5l3-3M3 11v2h10v-2" /></>);
make("import", <><path d="M8 10V2M5 5.5L8 2.5l3 3M3 11v2h10v-2" /></>);
make("search", <><circle cx="7" cy="7" r="4" /><path d="M10 10l3 3" /></>);
make("close", <><path d="M4 4l8 8M12 4l-8 8" /></>);
make("chevronDown", <><path d="M4 6l4 4 4-4" /></>);
make("chevronRight", <><path d="M6 4l4 4-4 4" /></>);
make("chevronLeft", <><path d="M10 4l-4 4 4 4" /></>);
make("triangle", <><path d="M4 5l4 5 4-5z" fill="currentColor" stroke="none" /></>);
make("triangleR", <><path d="M5 4l5 4-5 4z" fill="currentColor" stroke="none" /></>);
make("user", <><circle cx="8" cy="6" r="2.5" /><path d="M3 13.5c.5-2.5 2.5-4 5-4s4.5 1.5 5 4" /></>);
make("lock", <><rect x="3.5" y="7" width="9" height="6" rx="1" /><path d="M5.5 7V5a2.5 2.5 0 015 0v2" /></>);
make("building", <><rect x="3" y="3" width="10" height="10" /><path d="M5.5 5.5h1m3 0h1m-5 2h1m3 0h1m-5 2h1m3 0h1M7 13v-2h2v2" /></>);
make("home", <><path d="M2.5 8L8 3l5.5 5M4 8v5h8V8" /></>);
make("menu", <><path d="M3 4h10M3 8h10M3 12h10" /></>);
make("bell", <><path d="M8 2.5a3.5 3.5 0 013.5 3.5v2.5l1 2H3.5l1-2V6A3.5 3.5 0 018 2.5zM6.5 12.5a1.5 1.5 0 003 0" /></>);
make("settings", <><circle cx="8" cy="8" r="2" /><path d="M8 1.5l.7 1.6 1.7-.4.4 1.7 1.6.7-.7 1.6.7 1.6-1.6.7-.4 1.7-1.7-.4L8 13.5l-.7-1.6-1.7.4-.4-1.7-1.6-.7.7-1.6-.7-1.6 1.6-.7.4-1.7 1.7.4z" /></>);
make("function", <><path d="M3 8h2l1-3 2 6 1-3h4" /></>);
make("key", <><circle cx="5" cy="8" r="2.5" /><path d="M7.5 8H13l-1 2M11 8v2" /></>);
make("redo", <><path d="M13 4v3h-3" /><path d="M13 7a5 5 0 10-1 5" /></>);
make("undo", <><path d="M3 4v3h3" /><path d="M3 7a5 5 0 111 5" /></>);
make("clipboard", <><rect x="4" y="3" width="8" height="11" rx="1" /><path d="M6 3V2h4v1" /></>);
make("doc", <><path d="M4 2h5l3 3v9H4V2z" /><path d="M9 2v3h3" /></>);
make("folder", <><path d="M2 4.5h4l1.5 1.5H14v6.5H2v-8z" /></>);
make("expand", <><path d="M3 6V3h3M13 6V3h-3M3 10v3h3M13 10v3h-3" /></>);
make("dot", <><circle cx="8" cy="8" r="1.5" fill="currentColor" stroke="none" /></>);
make("filter", <><path d="M3 4h10l-4 4.5V13l-2-1.5V8.5L3 4z" /></>);
make("sortAsc", <><path d="M5 12V4M5 4l-2 2M5 4l2 2M9 5h4M9 8h3M9 11h2" /></>);
// Brand mark — overlapping registration squares (original geometric mark)
Ic.Brand = ({ size = 28, accent = "#3a8ee0" }) => (
<svg width={size} height={size} viewBox="0 0 32 32" fill="none">
<rect x="3" y="3" width="16" height="16" stroke="#fff" strokeWidth="2" />
<rect x="13" y="13" width="16" height="16" stroke={accent} strokeWidth="2" />
<rect x="13" y="13" width="6" height="6" fill="#fff" />
</svg>
);
window.Ic = Ic;