🎇 Swap destructured imports from lucide for direct imports per icon (#81)

ansballard · web-flow · commit de19d2758dec · 2025-06-26T14:27:44.000-06:00
the template is using lucide-react icons, which in production is tree
shaken. But in dev, they pull the full 1.23mb file, vs ~2kb per icon if
they're referenced directly. Updating these references to be direct
imports will save almost the entire 1.23mb, is still legible, and does
not affect prod bundle size.

|full icon bundle|x icon|
|---|---|
|1.23mb|2.72kb|
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import ChevronRight from "lucide-react/dist/esm/icons/chevron-right"
+import MoreHorizontal from "lucide-react/dist/esm/icons/more-horizontal"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps } from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import ChevronLeft from "lucide-react/dist/esm/icons/chevron-left"
+import ChevronRight from "lucide-react/dist/esm/icons/chevron-right"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
@@ -4,7 +4,8 @@ import { ComponentProps, createContext, useCallback, useContext, useEffect, useS
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import ArrowLeft from "lucide-react/dist/esm/icons/arrow-left"
+import ArrowRight from "lucide-react/dist/esm/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps } from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps } from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import SearchIcon from "lucide-react/dist/esm/icons/search"
 
 import { cn } from "@/lib/utils"
 import {
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
@@ -2,7 +2,9 @@
 
 import { ComponentProps } from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import CheckIcon from "lucide-react/dist/esm/icons/check";
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import XIcon from "lucide-react/dist/esm/icons/x"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -2,7 +2,9 @@
 
 import { ComponentProps } from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps, useContext } from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import MinusIcon from "lucide-react/dist/esm/icons/minus"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
@@ -1,6 +1,8 @@
 import { ComponentProps } from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import { ComponentProps } from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
@@ -1,9 +1,7 @@
 import { ComponentProps } from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
+import ChevronLeftIcon from "lucide-react/dist/esm/icons/chevron-left"
+import ChevronRightIcon from "lucide-react/dist/esm/icons/chevron-right"
+import MoreHorizontalIcon from "lucide-react/dist/esm/icons/more-horizontal"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
@@ -2,7 +2,7 @@
 
 import { ComponentProps } from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import CircleIcon from "lucide-react/dist/esm/icons/circle"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps } from "react"
-import { GripVerticalIcon } from "lucide-react"
+import GripVerticalIcon from "lucide-react/dist/esm/icons/grip-vertical"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -1,6 +1,8 @@
 import { ComponentProps } from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import CheckIcon from "lucide-react/dist/esm/icons/check"
+import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
+import ChevronUpIcon from "lucide-react/dist/esm/icons/chevron-up"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import XIcon from "lucide-react/dist/esm/icons/x"
 
 import { cn } from "@/lib/utils"
 
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
@@ -3,7 +3,7 @@
 import { CSSProperties, ComponentProps, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
+import PanelLeftIcon from "lucide-react/dist/esm/icons/panel-left"
 
 import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
