Add list of aliased lucide-react icons to the transform rules (#53483)

`lucide-react` follows the naming rule of `LucideName`, `NameIcon` and `Name` being exported from `/icons/{{ kebabCase Name }}`, but it has some special aliases such as `Stars` exported from `/icons/sparkles`. For now we have to add these rules manually. Fixes #53051 (comment). In the future we'll still need an automatic way to do this. The list was created from https://unpkg.com/[email protected]/dist/esm/lucide-react.mjs.
vercel · Aug 2, 2023 · b31b0ee · b31b0ee
1 parent b1bf7ae
commit b31b0ee
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
@@ -684,6 +684,36 @@ function assignDefaults(
       // instead of just resolving `lucide-react/esm/icons/{{kebabCase member}}` because this package
       // doesn't have proper `exports` fields for individual icons in its package.json.
       transform: {
+        // Special aliases
+        '(SortAsc|LucideSortAsc|SortAscIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/arrow-up-narrow-wide!lucide-react',
+        '(SortDesc|LucideSortDesc|SortDescIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/arrow-down-wide-narrow!lucide-react',
+        '(Verified|LucideVerified|VerifiedIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/badge-check!lucide-react',
+        '(Slash|LucideSlash|SlashIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/ban!lucide-react',
+        '(CurlyBraces|LucideCurlyBraces|CurlyBracesIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/braces!lucide-react',
+        '(CircleSlashed|LucideCircleSlashed|CircleSlashedIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/circle-slash-2!lucide-react',
+        '(SquareGantt|LucideSquareGantt|SquareGanttIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/gantt-chart-square!lucide-react',
+        '(SquareKanbanDashed|LucideSquareKanbanDashed|SquareKanbanDashedIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/kanban-square-dashed!lucide-react',
+        '(SquareKanban|LucideSquareKanban|SquareKanbanIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/kanban-square!lucide-react',
+        '(Edit3|LucideEdit3|Edit3Icon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen-line!lucide-react',
+        '(Edit|LucideEdit|EditIcon|PenBox|LucidePenBox|PenBoxIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen-square!lucide-react',
+        '(Edit2|LucideEdit2|Edit2Icon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen!lucide-react',
+        '(Stars|LucideStars|StarsIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/sparkles!lucide-react',
+        '(TextSelection|LucideTextSelection|TextSelectionIcon)':
+          'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/text-select!lucide-react',
+        // General rules
         'Lucide(.*)':
           'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/{{ kebabCase memberMatches.[1] }}!lucide-react',
         '(.*)Icon':

diff --git a/test/development/basic/modularize-imports/app/page.js b/test/development/basic/modularize-imports/app/page.js
@@ -1,11 +1,49 @@
-import { IceCream, BackpackIcon, LucideActivity } from 'lucide-react'
+import {
+  IceCream,
+  BackpackIcon,
+  LucideActivity,
+  Code,
+  Menu,
+  SortAsc,
+  SortAscIcon,
+  LucideSortDesc,
+  VerifiedIcon,
+  CurlyBraces,
+  Slash,
+  SquareGantt,
+  CircleSlashed,
+  SquareKanban,
+  SquareKanbanDashed,
+  Stars,
+  Edit,
+  Edit2,
+  LucideEdit3,
+  TextSelection,
+} from 'lucide-react'
 
 export default function Page() {
   return (
     <>
       <IceCream />
       <BackpackIcon />
       <LucideActivity />
+      <Code />
+      <Menu />
+      <SortAsc />
+      <SortAscIcon />
+      <LucideSortDesc />
+      <VerifiedIcon />
+      <CurlyBraces />
+      <Slash />
+      <SquareGantt />
+      <CircleSlashed />
+      <SquareKanban />
+      <SquareKanbanDashed />
+      <Stars />
+      <Edit />
+      <Edit2 />
+      <LucideEdit3 />
+      <TextSelection />
     </>
   )
 }