From a3b2a9b3e389d23771e0e8e12ed9b91714e54c08 Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Thu, 22 Jan 2026 20:37:37 +0100
Subject: [PATCH] feat(frontend): enhance icon detection and update config
 navigation icon (#5524)

# Description of Changes

### What was changed
- Extended the `generate-icons.js` script to detect additional icon
usage patterns:
  - `<LocalIcon icon='...' />` with single-quoted icon names
- Icon definitions inside configuration objects (`icon: '...'` or `icon:
"..."`)
- Updated the configuration navigation icon for the *Connection Mode*
section from `cloud-rounded` to `desktop-cloud-rounded` in both
hook-based and static section definitions.

### Why the change was made
- The icon generation script previously missed icons referenced via
`LocalIcon` with single quotes and icons defined in config objects,
which could lead to missing assets in builds.
- The navigation icon update aligns the UI with the intended
desktop-specific icon semantics.


---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/scripts/generate-icons.js            | 24 +++++++++++++++++++
 .../shared/config/configNavSections.tsx       |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/scripts/generate-icons.js b/frontend/scripts/generate-icons.js
index 8dc91e6cc..96566341c 100644
--- a/frontend/scripts/generate-icons.js
+++ b/frontend/scripts/generate-icons.js
@@ -52,6 +52,18 @@ function scanForUsedIcons() {
           });
         }
 
+        // Match LocalIcon usage: <LocalIcon icon='icon-name' ...>
+        const localIconSingleQuoteMatches = content.match(/<LocalIcon\s+[^>]*icon='([^']+)'/g);
+        if (localIconSingleQuoteMatches) {
+          localIconSingleQuoteMatches.forEach(match => {
+            const iconMatch = match.match(/icon='([^']+)'/);
+            if (iconMatch) {
+              usedIcons.add(iconMatch[1]);
+              debug(`  Found: ${iconMatch[1]} in ${path.relative(srcDir, filePath)}`);
+            }
+          });
+        }
+
         // Match old material-symbols-rounded spans: <span className="material-symbols-rounded">icon-name</span>
         const spanMatches = content.match(/<span[^>]*className="[^"]*material-symbols-rounded[^"]*"[^>]*>([^<]+)<\/span>/g);
         if (spanMatches) {
@@ -76,6 +88,18 @@ function scanForUsedIcons() {
             }
           });
         }
+
+        // Match icon config usage: icon: 'icon-name' or icon: "icon-name"
+        const iconPropertyMatches = content.match(/icon:\s*(['"])([a-z0-9-]+)\1/g);
+        if (iconPropertyMatches) {
+          iconPropertyMatches.forEach(match => {
+            const iconMatch = match.match(/icon:\s*(['"])([a-z0-9-]+)\1/);
+            if (iconMatch) {
+              usedIcons.add(iconMatch[2]);
+              debug(`  Found (config): ${iconMatch[2]} in ${path.relative(srcDir, filePath)}`);
+            }
+          });
+        }
       }
     });
   }
diff --git a/frontend/src/desktop/components/shared/config/configNavSections.tsx b/frontend/src/desktop/components/shared/config/configNavSections.tsx
index 9f8a63114..d5daddfa7 100644
--- a/frontend/src/desktop/components/shared/config/configNavSections.tsx
+++ b/frontend/src/desktop/components/shared/config/configNavSections.tsx
@@ -23,7 +23,7 @@ export const useConfigNavSections = (
       {
         key: 'connectionMode',
         label: t('settings.connection.title', 'Connection Mode'),
-        icon: 'cloud-rounded',
+        icon: 'desktop-cloud-rounded',
         component: <ConnectionSettings />,
       },
     ],
@@ -53,7 +53,7 @@ export const createConfigNavSections = (
       {
         key: 'connectionMode',
         label: 'Connection Mode',
-        icon: 'cloud-rounded',
+        icon: 'desktop-cloud-rounded',
         component: <ConnectionSettings />,
       },
     ],