Generated aliases for Weird NextJS Case transformations (#1549)

* add script

* Create script to generate the aliases Nextjs

* Apply aliases to the icon meta files

* Make sure duplicated imports are not added

* add command to lint-staged

.github/workflows/lucide-react.yml

@@ -5,6 +5,7 @@ on:
     paths:
       - packages/lucide-react/**
       - tools/build-icons/**
+      - scripts/generateNextJSAliases.mjs
       - pnpm-lock.yaml
 
 jobs:

icons/arrow-down-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-01"
   ]
 }

icons/arrow-down-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-10"
   ]
 }

icons/arrow-down-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-az"
   ]
 }

icons/arrow-down-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-down-za"
   ]
 }

icons/arrow-up-0-1.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-01"
   ]
 }

icons/arrow-up-1-0.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-10"
   ]
 }

icons/arrow-up-a-z.json

@@ -13,5 +13,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-az"
   ]
 }

icons/arrow-up-z-a.json

@@ -14,5 +14,8 @@
     "text",
     "layout",
     "arrows"
+  ],
+  "aliases": [
+    "arrow-up-za"
   ]
 }

icons/axis-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "axis-3-d"
   ]
 }

icons/file-axis-3d.json

@@ -12,5 +12,8 @@
   "categories": [
     "design",
     "files"
+  ],
+  "aliases": [
+    "file-axis-3-d"
   ]
 }

icons/grid-2x2.json

@@ -26,5 +26,8 @@
     "design",
     "shapes",
     "maths"
+  ],
+  "aliases": [
+    "grid-2-x-2"
   ]
 }

icons/grid-3x3.json

@@ -18,6 +18,7 @@
     "design"
   ],
   "aliases": [
-    "grid"
+    "grid",
+    "grid-3-x-3"
   ]
 }

icons/move-3d.json

@@ -14,5 +14,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "move-3-d"
   ]
 }

icons/rotate-3d.json

@@ -11,5 +11,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "rotate-3-d"
   ]
 }

icons/scale-3d.json

@@ -12,5 +12,8 @@
   ],
   "categories": [
     "design"
+  ],
+  "aliases": [
+    "scale-3-d"
   ]
 }

package.json

@@ -26,6 +26,7 @@
     "categories2icons": "node scripts/migrateCategoriesToIcons.mjs --presets @babel/env",
     "generate:changelog": "node ./scripts/generateChangelog.mjs",
     "generate:contributors": "node ./scripts/updateContributors.mjs icons/*.svg",
+    "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs",
     "postinstall": "husky install",
     "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}",
     "prepare": "husky install",
@@ -50,7 +51,10 @@
     "svgson": "^5.2.1"
   },
   "lint-staged": {
-    "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
+    "icons/*.svg":[
+      "node ./scripts/optimizeStagedSvgs.mjs",
+      "node ./scripts/generateNextJSAliases.mjs"
+    ]
   },
   "packageManager": "pnpm@7.14.0",
   "pnpm": {

scripts/generateNextJSAliases.mjs

@@ -0,0 +1,46 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import { getCurrentDirPath, readSvgDirectory } from './helpers.mjs';
+
+// This is a special case convertion NextJS uses for their modularize imports. We try to follow the same convention, to generate the same imports.
+function pascalToKebabNextJSFlavour(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z])-?([0-9]+|[A-Z])/g, '$1-$2')
+    .replace(/([0-9]+)-?([a-zA-Z])/g, '$1-$2')
+    .replace(/([0-9])-([0-9])/g, '$1$2')
+    .split('-')
+    .map((word) => word.toLowerCase())
+    .join('-');
+}
+
+const currentDir = getCurrentDirPath(import.meta.url);
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+const iconNames = svgFiles.map((icon) => icon.split('.')[0]).reverse();
+
+console.log('Creating aliases for NextJS imports: ');
+
+Promise.all(
+  iconNames.map(async (iconName) => {
+    const pascalCaseName = iconName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+
+    const iconNameKebabCaseNextjsFlavour = pascalToKebabNextJSFlavour(pascalCaseName);
+
+    if (iconName !== iconNameKebabCaseNextjsFlavour) {
+      console.log(iconName, '➡️', iconNameKebabCaseNextjsFlavour);
+
+      const metaJson = await fs.readFile(path.resolve(ICONS_DIR, `${iconName}.json`), 'utf-8');
+      const iconMetaData = JSON.parse(metaJson);
+
+      const aliases = iconMetaData.aliases ?? [];
+      aliases.push(iconNameKebabCaseNextjsFlavour);
+
+      const output = JSON.stringify({ ...iconMetaData, aliases }, null, 2);
+      fs.writeFile(path.resolve(ICONS_DIR, `${iconName}.json`), output, 'utf-8');
+    }
+  }),
+);

tools/build-icons/building/generateAliasesFile.mjs

@@ -45,6 +45,11 @@ export default async function generateAliasesFile({
               await fs.promises.writeFile(location, output, 'utf-8');
             }
 
+            // Don't import the same icon twice
+            if (componentName === componentNameAlias) {
+              return;
+            }
+
             const exportFileIcon = separateAliasesFile ? alias : iconName;
 
             importString += getImportString(