mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-25 21:59:23 +00:00
73deece29e
# Description of Changes This PR refactors the frontend icon system to remove reliance on @mui/icons-material and the Google Material Symbols webfont. 🔄 Changes Introduced a new LocalIcon component powered by Iconify. Added scripts/generate-icons.js to: Scan the codebase for used icons. Extract only required Material Symbols from @iconify-json/material-symbols. Generate a minimized JSON bundle and TypeScript types. Updated .gitignore to exclude generated icon files. Replaced all <span className="material-symbols-rounded"> and MUI icon imports with <LocalIcon> usage. Removed material-symbols CSS import and related font dependency. Updated tsconfig.json to support JSON imports. Added prebuild/predev hooks to auto-generate the icons. ✅ Benefits No more 5MB+ Google webfont download → reduces initial page load size. Smaller install footprint → no giant @mui/icons-material dependency. Only ships the icons we actually use, cutting bundle size further. Type-safe icons via auto-generated MaterialSymbolIcon union type. Note most MUI not included in this update since they are low priority due to small SVG sizing (don't grab whole bundle) --- ## 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) ### 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: a <a>
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React from 'react';
|
||
import { addCollection, Icon } from '@iconify/react';
|
||
import iconSet from '../../assets/material-symbols-icons.json';
|
||
|
||
// Load icons synchronously at import time - guaranteed to be ready on first render
|
||
let iconsLoaded = false;
|
||
let localIconCount = 0;
|
||
|
||
try {
|
||
if (iconSet) {
|
||
addCollection(iconSet);
|
||
iconsLoaded = true;
|
||
localIconCount = Object.keys(iconSet.icons || {}).length;
|
||
console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
|
||
}
|
||
} catch (error) {
|
||
console.info('ℹ️ Local icons not available - using CDN fallback');
|
||
}
|
||
|
||
interface LocalIconProps {
|
||
icon: string;
|
||
width?: string | number;
|
||
height?: string | number;
|
||
style?: React.CSSProperties;
|
||
className?: string;
|
||
}
|
||
|
||
/**
|
||
* LocalIcon component that uses our locally bundled Material Symbols icons
|
||
* instead of loading from CDN
|
||
*/
|
||
export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
|
||
// Convert our icon naming convention to the local collection format
|
||
const iconName = icon.startsWith('material-symbols:')
|
||
? icon
|
||
: `material-symbols:${icon}`;
|
||
|
||
// Development logging (only in dev mode)
|
||
if (process.env.NODE_ENV === 'development') {
|
||
const logKey = `icon-${iconName}`;
|
||
if (!sessionStorage.getItem(logKey)) {
|
||
const source = iconsLoaded ? 'local' : 'CDN';
|
||
console.debug(`🎯 Icon: ${iconName} (${source})`);
|
||
sessionStorage.setItem(logKey, 'logged');
|
||
}
|
||
}
|
||
|
||
// Always render the icon - Iconify will use local if available, CDN if not
|
||
return <Icon icon={iconName} {...props} />;
|
||
};
|
||
|
||
export default LocalIcon; |