Integrate Lucide icons and replace inline SVGs

Add Lucide icon library and switch many inline SVGs to programmatically generated Lucide icons for consistent styling and reuse. Adds frontend/vendor/lucide.min.js and includes it in index.html; adds helper functions (escapeSvgAttr, svgAttrs, lucideIcon) in app.js and replaces numerous hard-coded SVG strings with Lucide-generated icons and CSS utility classes. Update components.css with .gd-lucide-icon, color helpers for folder/file icons, and remove a global stroke-width override so icon strokeWidth can be controlled per icon. Small accessibility and UI tweaks: use aria-label/title on several buttons and swap icons in modals, menus and toolbars. Also updates package.json/package-lock.json (dependency adjustments).
This commit is contained in:
2026-05-13 13:37:31 +12:00
parent 558cd3ddd7
commit 7753abd896
6 changed files with 118 additions and 30 deletions
+14 -1
View File
@@ -105,6 +105,20 @@
display: none !important;
}
.gd-lucide-icon {
display: inline-block;
flex-shrink: 0;
vertical-align: -0.15em;
}
.gd-folder-icon {
color: #54aeff;
}
.gd-file-icon {
color: #848d97;
}
.accent {
color: var(--accent);
}
@@ -1009,7 +1023,6 @@
height: 44px;
fill: none;
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}