feat: Add lazy load variation for each icon (#2469)

packages/icons/.gitignore

@@ -1,2 +1,3 @@
 src/react
+src/lazy
 src/svg/index.ts

packages/icons/package.json

@@ -26,6 +26,11 @@
       "types": "./dist/svg/index.d.ts",
       "import": "./dist/svg/index.js",
       "default": "./dist/svg/index.js"
+    },
+    "./lazy": {
+      "types": "./dist/lazt/index.d.ts",
+      "import": "./dist/lazy/index.js",
+      "default": "./dist/lazy/index.js"
     }
   },
   "typesVersions": {
@@ -38,6 +43,9 @@
       ],
       "raw": [
         "./dist/svg/index.d.ts"
+      ],
+      "lazy": [
+        "./dist/lazy/index.d.ts"
       ]
     }
   },
@@ -46,15 +54,16 @@
   ],
   "scripts": {
     "plop": "plop",
-    "build": "yarn clean && yarn build:react-icons && yarn generate-svg-index && rollup -c",
+    "build": "yarn clean && yarn build:react-icons && yarn generate-lazy-icons && yarn generate-svg-index && rollup -c",
     "build:react-icons": "svg2react-icon --typescript --keep-colors src/svg/ src/react/ --no-sub-dir",
     "clean": "rm -rf dist",
     "test": "vitest",
     "lint": "eslint . --max-warnings 0 && yarn validate-icons",
     "lint:fix": "yarn lint -- --fix",
     "validate-icons": "node scripts/validate-meta.js && node scripts/validate-icons-colors.js",
     "generate-meta": "node scripts/generate-meta.js",
-    "generate-svg-index": "node scripts/generate-svg-index.js"
+    "generate-svg-index": "node scripts/generate-svg-index.js",
+    "generate-lazy-icons": "node scripts/generate-lazy-icons.js"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",

packages/icons/rollup.config.js

@@ -4,7 +4,7 @@ import { terser } from "rollup-plugin-terser";
 import svg from "rollup-plugin-svg";
 
 export default {
-  input: ["src/react/index.ts", "src/svg/index.ts", "src/iconsMetaData.ts"],
+  input: ["src/react/index.ts", "src/lazy/index.ts", "src/svg/index.ts", "src/iconsMetaData.ts"],
   output: {
     dir: "dist",
     indent: false,

packages/icons/scripts/generate-lazy-icons.js

@@ -0,0 +1,41 @@
+import fs from "fs";
+import path from "path";
+
+const REACT_ICONS_FOLDER = path.resolve("./src/react");
+const LAZY_EXPORTS_FOLDER = path.resolve("./src/lazy");
+
+if (!fs.existsSync(LAZY_EXPORTS_FOLDER)) {
+  fs.mkdirSync(LAZY_EXPORTS_FOLDER);
+}
+
+const iconFiles = fs.readdirSync(REACT_ICONS_FOLDER).filter(file => file.endsWith(".tsx"));
+
+iconFiles.forEach(file => {
+  const fileNameWithoutExtension = path.basename(file, ".tsx");
+  const lazyComponentCode = `import React, { lazy, Suspense } from 'react';
+
+const ${fileNameWithoutExtension}Icon = lazy(() => import('../react/${fileNameWithoutExtension}'));
+
+const ${fileNameWithoutExtension} = ({ fallback = <div />, ...props }) => (
+  <Suspense fallback={fallback}>
+    <${fileNameWithoutExtension}Icon {...props} />
+  </Suspense>
+);
+
+export default ${fileNameWithoutExtension};
+`;
+
+  fs.writeFileSync(path.join(LAZY_EXPORTS_FOLDER, `${fileNameWithoutExtension}.tsx`), lazyComponentCode);
+});
+
+// Create an index.js file that exports all lazy-loaded components
+const indexContent = iconFiles
+  .map(file => {
+    const fileNameWithoutExtension = path.basename(file, ".tsx");
+    return `export { default as Lazy${fileNameWithoutExtension}Icon } from './${fileNameWithoutExtension}';`;
+  })
+  .join("\n");
+
+fs.writeFileSync(path.join(LAZY_EXPORTS_FOLDER, "index.ts"), indexContent);
+
+console.log(`Generated lazy components and index.ts for ${iconFiles.length} icons.`);