refactor(frontend): normalize LocalIcon usage and icon scanning

This commit is contained in:
Ludy87 2025-11-29 16:51:53 +01:00
parent 85d9b5b83d
commit 13e86f1c44
No known key found for this signature in database
GPG Key ID: 92696155E0220F94
8 changed files with 45 additions and 33 deletions

View File

@ -19,39 +19,51 @@ const debug = (message) => {
function scanForUsedIcons() {
const usedIcons = new Set();
const srcDir = path.join(__dirname, '..', 'src');
const addIcon = (iconName) => {
if (!iconName) return;
const normalizedName = iconName.startsWith('material-symbols:')
? iconName.split(':', 2)[1]
: iconName;
usedIcons.add(normalizedName);
debug(` Found: ${iconName} -> ${normalizedName}`);
};
info('🔍 Scanning codebase for LocalIcon usage...');
if (!fs.existsSync(srcDir)) {
console.error('❌ Source directory not found:', srcDir);
process.exit(1);
}
// Recursively scan all .tsx and .ts files
function scanDirectory(dir) {
const files = fs.readdirSync(dir);
files.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
scanDirectory(filePath);
} else if (file.endsWith('.tsx') || file.endsWith('.ts')) {
const content = fs.readFileSync(filePath, 'utf8');
// Match LocalIcon usage: <LocalIcon icon="icon-name" ...>
const localIconMatches = content.match(/<LocalIcon\s+[^>]*icon="([^"]+)"/g);
if (localIconMatches) {
localIconMatches.forEach(match => {
const iconMatch = match.match(/icon="([^"]+)"/);
if (iconMatch) {
usedIcons.add(iconMatch[1]);
debug(` Found: ${iconMatch[1]} in ${path.relative(srcDir, filePath)}`);
addIcon(iconMatch[1]);
debug(` 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) {
@ -59,32 +71,32 @@ function scanForUsedIcons() {
const iconMatch = match.match(/>([^<]+)<\/span>/);
if (iconMatch && iconMatch[1].trim()) {
const iconName = iconMatch[1].trim();
usedIcons.add(iconName);
debug(` Found (legacy): ${iconName} in ${path.relative(srcDir, filePath)}`);
addIcon(iconName);
debug(` in ${path.relative(srcDir, filePath)}`);
}
});
}
// Match Icon component usage: <Icon icon="material-symbols:icon-name" ...>
const iconMatches = content.match(/<Icon\s+[^>]*icon="material-symbols:([^"]+)"/g);
if (iconMatches) {
iconMatches.forEach(match => {
const iconMatch = match.match(/icon="material-symbols:([^"]+)"/);
if (iconMatch) {
usedIcons.add(iconMatch[1]);
debug(` Found (Icon): ${iconMatch[1]} in ${path.relative(srcDir, filePath)}`);
addIcon(iconMatch[1]);
debug(` in ${path.relative(srcDir, filePath)}`);
}
});
}
}
});
}
scanDirectory(srcDir);
const iconArray = Array.from(usedIcons).sort();
info(`📋 Found ${iconArray.length} unique icons across codebase`);
return iconArray;
}
@ -102,7 +114,7 @@ async function main() {
const existingSet = JSON.parse(fs.readFileSync(outputPath, 'utf8'));
const existingIcons = Object.keys(existingSet.icons || {}).sort();
const currentIcons = [...usedIcons].sort();
if (JSON.stringify(existingIcons) === JSON.stringify(currentIcons)) {
needsRegeneration = false;
info(`✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`);
@ -122,7 +134,7 @@ async function main() {
// Dynamic import of ES module
const { getIcons } = await import('@iconify/utils');
// Extract only our used icons from the full set
const extractedIcons = getIcons(icons, usedIcons);
@ -183,4 +195,4 @@ export default iconSet;
main().catch(error => {
console.error('❌ Script failed:', error);
process.exit(1);
});
});

View File

@ -17,7 +17,7 @@ export default function LoginRequiredBanner({ show }: LoginRequiredBannerProps)
return (
<Alert
icon={<LocalIcon icon="lock-rounded" width={20} height={20} />}
icon={<LocalIcon icon="lock" width={20} height={20} />}
title={t('admin.settings.loginDisabled.title', 'Login Mode Required')}
color="blue"
variant="light"

View File

@ -193,7 +193,7 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false }) =>
size="sm"
color={updateSummary.max_priority === 'urgent' ? 'red' : 'blue'}
onClick={() => setUpdateModalOpened(true)}
leftSection={<LocalIcon icon="system-update-rounded" width="1rem" height="1rem" />}
leftSection={<LocalIcon icon="system-update-alt-rounded" width="1rem" height="1rem" />}
>
{t('settings.general.updates.viewDetails', 'View Details')}
</Button>

View File

@ -63,7 +63,7 @@ export default function ToastRenderer() {
{/* Icon */}
<div className="toast-icon">
{t.icon ?? (
<LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
<LocalIcon icon={getDefaultIconName(t)} width={20} height={20} />
)}
</div>
@ -86,7 +86,7 @@ export default function ToastRenderer() {
}}
className={`toast-button toast-expand-button ${t.isExpanded ? 'toast-expand-button--expanded' : ''}`}
>
<LocalIcon icon="material-symbols:expand-more-rounded" />
<LocalIcon icon="expand-more-rounded" />
</button>
)}
<button
@ -94,7 +94,7 @@ export default function ToastRenderer() {
onClick={() => dismiss(t.id)}
className="toast-button"
>
<LocalIcon icon="material-symbols:close-rounded" width={20} height={20} />
<LocalIcon icon="close-rounded" width={20} height={20} />
</button>
</div>
</div>

View File

@ -42,7 +42,7 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
component="label"
htmlFor="attachments-input"
disabled={disabled}
leftSection={<LocalIcon icon="plus" width="14" height="14" />}
leftSection={<LocalIcon icon="add" width="14" height="14" />}
>
{parameters.attachments?.length > 0
? t("AddAttachmentsRequest.addMoreFiles", "Add more files...")

View File

@ -249,7 +249,7 @@ export const SavedSignaturesSection = ({
onClick={() => handleNavigate('prev')}
disabled={disabled || activeIndex === 0}
>
<LocalIcon icon="material-symbols:chevron-left-rounded" width={18} height={18} />
<LocalIcon icon="chevron-left-rounded" width={18} height={18} />
</ActionIcon>
<ActionIcon
variant="light"
@ -257,7 +257,7 @@ export const SavedSignaturesSection = ({
onClick={() => handleNavigate('next')}
disabled={disabled || activeIndex >= signatures.length - 1}
>
<LocalIcon icon="material-symbols:chevron-right-rounded" width={18} height={18} />
<LocalIcon icon="chevron-right-rounded" width={18} height={18} />
</ActionIcon>
</Group>
</Group>
@ -277,7 +277,7 @@ export const SavedSignaturesSection = ({
onClick={() => onDeleteSignature(activeSignature)}
disabled={disabled}
>
<LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
<LocalIcon icon="delete-outline-rounded" width={18} height={18} />
</ActionIcon>
</Tooltip>
</Group>

View File

@ -314,7 +314,7 @@ const SignSettings = ({
color={isSaved ? 'green' : undefined}
onClick={onClick}
disabled={!isReady || disabled || isSavedSignatureLimitReached || !hasChanges}
leftSection={<LocalIcon icon="material-symbols:save-rounded" width={16} height={16} />}
leftSection={<LocalIcon icon="save-rounded" width={16} height={16} />}
>
{isSaved ? translate('saved.status.saved', 'Saved') : label}
</Button>
@ -903,7 +903,7 @@ const SignSettings = ({
gap: '0.4rem',
}}
>
<LocalIcon icon="material-symbols:pause-rounded" width={20} height={20} />
<LocalIcon icon="pause-rounded" width={20} height={20} />
<Text component="span" size="sm" fw={500}>
{translate('mode.pause', 'Pause placement')}
</Text>
@ -926,7 +926,7 @@ const SignSettings = ({
gap: '0.4rem',
}}
>
<LocalIcon icon="material-symbols:play-arrow-rounded" width={20} height={20} />
<LocalIcon icon="play-arrow-rounded" width={20} height={20} />
<Text component="span" size="sm" fw={500}>
{translate('mode.resume', 'Resume placement')}
</Text>

View File

@ -203,7 +203,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
supportsAutomate: false, //TODO make support Sign
},
addText: {
icon: <LocalIcon icon="material-symbols:text-fields-rounded" width="1.5rem" height="1.5rem" />,
icon: <LocalIcon icon="text-fields-rounded" width="1.5rem" height="1.5rem" />,
name: t('home.addText.title', 'Add Text'),
component: AddText,
description: t('home.addText.desc', 'Add custom text anywhere in your PDF'),