413 lines
12 KiB
JavaScript
413 lines
12 KiB
JavaScript
/* ============================================================
|
|
icons.jsx — the prototype's inline SVG set, as JSX.
|
|
|
|
js/ui.js held these as raw markup strings and injected them with innerHTML.
|
|
Rendering strings would require dangerouslySetInnerHTML, which ADR 0013 bans
|
|
outright, so each entry is a fragment of SVG children instead. Every attribute
|
|
in the original set is single-word lowercase (d, points, cx, cy, r, x, y, x1,
|
|
y1, x2, y2, rx, width, height), all of which are valid React props unchanged —
|
|
so this is a pure mechanical wrap with no attribute renaming.
|
|
|
|
Stroke styling lives in css/styles.css and is untouched.
|
|
============================================================ */
|
|
|
|
export const ICONS = {
|
|
'user-plus': (
|
|
<>
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<line x1="19" y1="8" x2="19" y2="14" />
|
|
<line x1="22" y1="11" x2="16" y2="11" />
|
|
</>
|
|
),
|
|
calendar: (
|
|
<>
|
|
<rect x="3" y="4" width="18" height="18" rx="2" />
|
|
<line x1="16" y1="2" x2="16" y2="6" />
|
|
<line x1="8" y1="2" x2="8" y2="6" />
|
|
<line x1="3" y1="10" x2="21" y2="10" />
|
|
</>
|
|
),
|
|
check: <polyline points="20 6 9 17 4 12" />,
|
|
'check-circle': (
|
|
<>
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
|
<polyline points="22 4 12 14.01 9 11.01" />
|
|
</>
|
|
),
|
|
x: (
|
|
<>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</>
|
|
),
|
|
'x-circle': (
|
|
<>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="15" y1="9" x2="9" y2="15" />
|
|
<line x1="9" y1="9" x2="15" y2="15" />
|
|
</>
|
|
),
|
|
file: (
|
|
<>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</>
|
|
),
|
|
star: (
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
|
),
|
|
message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
|
|
info: (
|
|
<>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="12" y1="16" x2="12" y2="12" />
|
|
<line x1="12" y1="8" x2="12.01" y2="8" />
|
|
</>
|
|
),
|
|
alert: (
|
|
<>
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
|
|
<line x1="12" y1="9" x2="12" y2="13" />
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
</>
|
|
),
|
|
eye: (
|
|
<>
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</>
|
|
),
|
|
edit: (
|
|
<>
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
<path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" />
|
|
</>
|
|
),
|
|
trash: (
|
|
<>
|
|
<polyline points="3 6 5 6 21 6" />
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
</>
|
|
),
|
|
more: (
|
|
<>
|
|
<circle cx="12" cy="12" r="1" />
|
|
<circle cx="19" cy="12" r="1" />
|
|
<circle cx="5" cy="12" r="1" />
|
|
</>
|
|
),
|
|
plus: (
|
|
<>
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</>
|
|
),
|
|
download: (
|
|
<>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</>
|
|
),
|
|
filter: <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />,
|
|
clock: (
|
|
<>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polyline points="12 6 12 12 16 14" />
|
|
</>
|
|
),
|
|
mail: (
|
|
<>
|
|
<path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</>
|
|
),
|
|
phone: (
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.94.7 2.85a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.87.57 2.85.7A2 2 0 0 1 22 16.92z" />
|
|
),
|
|
map: (
|
|
<>
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
|
<circle cx="12" cy="10" r="3" />
|
|
</>
|
|
),
|
|
briefcase: (
|
|
<>
|
|
<rect x="2" y="7" width="20" height="14" rx="2" />
|
|
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
|
|
</>
|
|
),
|
|
'trending-up': (
|
|
<>
|
|
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
|
|
<polyline points="17 6 23 6 23 12" />
|
|
</>
|
|
),
|
|
'trending-down': (
|
|
<>
|
|
<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" />
|
|
<polyline points="17 18 23 18 23 12" />
|
|
</>
|
|
),
|
|
users: (
|
|
<>
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</>
|
|
),
|
|
award: (
|
|
<>
|
|
<circle cx="12" cy="8" r="7" />
|
|
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
|
|
</>
|
|
),
|
|
dollar: (
|
|
<>
|
|
<line x1="12" y1="1" x2="12" y2="23" />
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
|
|
</>
|
|
),
|
|
target: (
|
|
<>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<circle cx="12" cy="12" r="6" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
</>
|
|
),
|
|
send: (
|
|
<>
|
|
<line x1="22" y1="2" x2="11" y2="13" />
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
|
</>
|
|
),
|
|
video: (
|
|
<>
|
|
<polygon points="23 7 16 12 23 17 23 7" />
|
|
<rect x="1" y="5" width="15" height="14" rx="2" />
|
|
</>
|
|
),
|
|
search: (
|
|
<>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
</>
|
|
),
|
|
'chevron-left': <polyline points="15 18 9 12 15 6" />,
|
|
'chevron-right': <polyline points="9 18 15 12 9 6" />,
|
|
'chevron-down': <path d="M6 9l6 6 6-6" />,
|
|
refresh: (
|
|
<>
|
|
<polyline points="23 4 23 10 17 10" />
|
|
<polyline points="1 20 1 14 7 14" />
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
|
</>
|
|
),
|
|
copy: (
|
|
<>
|
|
<rect x="9" y="9" width="13" height="13" rx="2" />
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
|
</>
|
|
),
|
|
upload: (
|
|
<>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="17 8 12 3 7 8" />
|
|
<line x1="12" y1="3" x2="12" y2="15" />
|
|
</>
|
|
),
|
|
linkedin: (
|
|
<>
|
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
|
<rect x="2" y="9" width="4" height="12" />
|
|
<circle cx="4" cy="4" r="2" />
|
|
</>
|
|
),
|
|
inbox: (
|
|
<>
|
|
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
|
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
|
</>
|
|
),
|
|
sparkles: (
|
|
<>
|
|
<path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z" />
|
|
<path d="M19 3v4M21 5h-4M5 17v4M7 19H3" />
|
|
</>
|
|
),
|
|
zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
|
|
grid: (
|
|
<>
|
|
<rect x="3" y="3" width="7" height="7" />
|
|
<rect x="14" y="3" width="7" height="7" />
|
|
<rect x="14" y="14" width="7" height="7" />
|
|
<rect x="3" y="14" width="7" height="7" />
|
|
</>
|
|
),
|
|
bookmark: <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />,
|
|
paperclip: (
|
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
|
|
),
|
|
external: (
|
|
<>
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
|
<polyline points="15 3 21 3 21 9" />
|
|
<line x1="10" y1="14" x2="21" y2="3" />
|
|
</>
|
|
),
|
|
shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
|
|
lock: (
|
|
<>
|
|
<rect x="3" y="11" width="18" height="11" rx="2" />
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
</>
|
|
),
|
|
flame: (
|
|
<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
|
|
),
|
|
bell: (
|
|
<>
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
|
</>
|
|
),
|
|
layers: (
|
|
<>
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2" />
|
|
<polyline points="2 17 12 22 22 17" />
|
|
<polyline points="2 12 12 17 22 12" />
|
|
</>
|
|
),
|
|
list: (
|
|
<>
|
|
<line x1="8" y1="6" x2="21" y2="6" />
|
|
<line x1="8" y1="12" x2="21" y2="12" />
|
|
<line x1="8" y1="18" x2="21" y2="18" />
|
|
<line x1="3" y1="6" x2="3.01" y2="6" />
|
|
<line x1="3" y1="12" x2="3.01" y2="12" />
|
|
<line x1="3" y1="18" x2="3.01" y2="18" />
|
|
</>
|
|
),
|
|
'check-square': (
|
|
<>
|
|
<polyline points="9 11 12 14 22 4" />
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
|
|
</>
|
|
),
|
|
'arrow-right': (
|
|
<>
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</>
|
|
),
|
|
|
|
/* --- shell icons: these lived inline in index.html, not in js/ui.js --- */
|
|
dashboard: (
|
|
<>
|
|
<rect x="3" y="3" width="7" height="9" />
|
|
<rect x="14" y="3" width="7" height="5" />
|
|
<rect x="14" y="12" width="7" height="9" />
|
|
<rect x="3" y="16" width="7" height="5" />
|
|
</>
|
|
),
|
|
pipeline: (
|
|
<>
|
|
<rect x="2" y="4" width="6" height="16" rx="1" />
|
|
<rect x="9" y="4" width="6" height="10" rx="1" />
|
|
<rect x="16" y="4" width="6" height="13" rx="1" />
|
|
</>
|
|
),
|
|
reports: (
|
|
<>
|
|
<path d="M3 3v18h18" />
|
|
<path d="M18 17V9" />
|
|
<path d="M13 17V5" />
|
|
<path d="M8 17v-3" />
|
|
</>
|
|
),
|
|
analytics: (
|
|
<>
|
|
<path d="M21 21H3V3" />
|
|
<path d="M7 14l4-4 3 3 5-6" />
|
|
</>
|
|
),
|
|
offers: (
|
|
<>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<path d="M14 2v6h6" />
|
|
<path d="M9 15l2 2 4-4" />
|
|
</>
|
|
),
|
|
managers: (
|
|
<>
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<line x1="19" y1="8" x2="19" y2="14" />
|
|
<line x1="22" y1="11" x2="16" y2="11" />
|
|
</>
|
|
),
|
|
settings: (
|
|
<>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|
</>
|
|
),
|
|
help: (
|
|
<>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
|
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
</>
|
|
),
|
|
menu: (
|
|
<>
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</>
|
|
),
|
|
sun: (
|
|
<>
|
|
<circle cx="12" cy="12" r="5" />
|
|
<line x1="12" y1="1" x2="12" y2="3" />
|
|
<line x1="12" y1="21" x2="12" y2="23" />
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
|
<line x1="1" y1="12" x2="3" y2="12" />
|
|
<line x1="21" y1="12" x2="23" y2="12" />
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
|
</>
|
|
),
|
|
moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />,
|
|
user: (
|
|
<>
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</>
|
|
),
|
|
logout: (
|
|
<>
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
|
<path d="M16 17l5-5-5-5" />
|
|
<line x1="21" y1="12" x2="9" y2="12" />
|
|
</>
|
|
),
|
|
talent: (
|
|
<>
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
|
<path d="M22 4L12 14.01l-3-3" />
|
|
</>
|
|
),
|
|
}
|
|
|
|
export default function Icon({ name, className = '' }) {
|
|
return (
|
|
<svg className={className} viewBox="0 0 24 24" aria-hidden="true">
|
|
{ICONS[name] ?? ICONS.info}
|
|
</svg>
|
|
)
|
|
}
|