DX: Improved auto imports (#6950)

Taken from:

https://x.com/dillionverma/status/1917639091228926311

.vscode/settings.json

@@ -9,6 +9,12 @@
   "typescript.preferences.autoImportFileExcludePatterns": [
     "./packages/thirdweb/src/exports"
   ],
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
+    "@radix-ui",
+    "next/router",
+    "next/dist",
+    "^lucide-react/dist/lucide-react.suffixed$"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"

apps/dashboard/lucide-react.d.ts

@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import {
   forwardRef,
   useCallback,
@@ -201,7 +201,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                       orientation="vertical"
                       className="flex h-full min-h-6"
                     />
-                    <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                    <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
                   </div>
                 </div>
               ) : (
@@ -209,7 +209,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                   <span className="text-muted-foreground text-sm">
                     {placeholder}
                   </span>
-                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                  <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
                 </div>
               )}
             </Button>

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
-import { CheckIcon, ChevronDown, SearchIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import React, { useRef, useMemo, useEffect } from "react";
 import { useShowMore } from "../../lib/useShowMore";
 import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
@@ -131,7 +131,7 @@ export const SelectWithSearch = React.forwardRef<
               >
                 {selectedOption?.label || placeholder}
               </span>
-              <ChevronDown className="size-4 cursor-pointer text-muted-foreground" />
+              <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
             </div>
           </Button>
         </PopoverTrigger>

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -8,7 +8,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy, XIcon } from "lucide-react";
+import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
@@ -104,9 +104,9 @@ export function WalletAddress(props: {
               className="flex items-center gap-2"
             >
               {hasCopied ? (
-                <Check className="h-4 w-4" />
+                <CheckIcon className="h-4 w-4" />
               ) : (
-                <Copy className="h-4 w-4" />
+                <CopyIcon className="h-4 w-4" />
               )}
               {hasCopied ? "Copied!" : "Copy"}
             </Button>

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -9,11 +9,7 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { format, isBefore } from "date-fns";
-import {
-  Calendar as CalendarIcon,
-  CalendarX2Icon,
-  ChevronDownIcon,
-} from "lucide-react";
+import { CalendarIcon, CalendarX2Icon, ChevronDownIcon } from "lucide-react";
 import React from "react";
 import { DynamicHeight } from "./DynamicHeight";
 import { TabButtons } from "./tabs";

apps/dashboard/src/@/components/ui/accordion.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDownIcon className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

apps/dashboard/src/@/components/ui/breadcrumb.tsx

@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -84,7 +84,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronRightIcon />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -102,7 +102,7 @@ const BreadcrumbEllipsis = ({
     )}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 );

apps/dashboard/src/@/components/ui/calendar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type * as React from "react";
 import { DayPicker } from "react-day-picker";
 
@@ -54,8 +54,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />,
       }}
       {...props}
     />

apps/dashboard/src/@/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <CheckIcon className="size-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

apps/dashboard/src/@/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -65,7 +65,7 @@ const DialogContent = React.forwardRef<
             dialogCloseClassName,
           )}
         >
-          <X className="h-4 w-4" />
+          <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>

apps/dashboard/src/@/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <CircleIcon className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

apps/dashboard/src/@/components/ui/input-otp.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { OTPInput, OTPInputContext } from "input-otp";
-import { Dot } from "lucide-react";
+import { DotIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
 >(({ ...props }, ref) => (
   // biome-ignore lint/a11y/useFocusableInteractive: pure shadcn component - it works
   <div ref={ref} role="separator" {...props}>
-    <Dot />
+    <DotIcon />
   </div>
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";

apps/dashboard/src/@/components/ui/pagination.tsx

@@ -1,4 +1,8 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
 import * as React from "react";
 
 import { Button, type ButtonProps } from "@/components/ui/button";
@@ -66,7 +70,7 @@ const PaginationPrevious = ({
     className={cn("h-10 gap-1 pl-2.5", className)}
     {...props}
   >
-    <ChevronLeft className="h-4 w-4" />
+    <ChevronLeftIcon className="size-4" />
     <span className="max-sm:hidden">Previous</span>
   </PaginationLink>
 );
@@ -83,7 +87,7 @@ const PaginationNext = ({
     {...props}
   >
     <span className="max-sm:hidden">Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRightIcon className="size-4" />
   </PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
@@ -100,7 +104,7 @@ const PaginationEllipsis = ({
     )}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontalIcon className="size-4" />
     <span className="sr-only">More pages</span>
   </span>
 );

apps/dashboard/src/@/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import { CircleIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -35,7 +35,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <CircleIcon className="size-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
@@ -59,11 +59,11 @@ const RadioGroupItemButton = React.forwardRef<
       <div className="flex aspect-square h-4 w-4 items-center justify-center rounded-full border text-inverted ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-foreground/25 group-data-[state=checked]:border-inverted">
         {/* Show on checked */}
         <RadioGroupPrimitive.Indicator className="flex items-center justify-center rounded-full transition-all">
-          <Circle className="h-2 w-2 fill-current text-current" />
+          <CircleIcon className="size-2 fill-current text-current" />
         </RadioGroupPrimitive.Indicator>
         {/* Show on hover */}
         <div className="hidden items-center justify-center rounded-full text-foreground/25 transition-all group-hover:flex group-data-[state=checked]:hidden">
-          <Circle className="h-2 w-2 fill-current text-current" />
+          <CircleIcon className="size-2 fill-current text-current" />
         </div>
       </div>
       <Label className="cursor-pointer">{props.children}</Label>

apps/dashboard/src/@/components/ui/select.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -28,7 +28,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className={cn("h-4 w-4 opacity-50", chevronClassName)} />
+      <ChevronDownIcon className={cn("h-4 w-4 opacity-50", chevronClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -127,7 +127,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

apps/dashboard/src/@/components/ui/sheet.tsx

@@ -2,7 +2,7 @@
 
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm border-border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+        <XIcon className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

apps/dashboard/src/@/components/ui/sidebar.tsx

@@ -21,7 +21,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import { PanelLeftIcon } from "lucide-react";
 import * as React from "react";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -288,7 +288,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/NextSteps.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useTrack } from "hooks/analytics/useTrack";
-import { FileText } from "lucide-react";
+import { FileTextIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
 import { SectionTitle } from "../server/SectionTitle";
@@ -14,7 +14,7 @@ export default function NextSteps(props: { chain: ChainMetadata }) {
       <SectionTitle title="Next Steps" />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         <div className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border">
-          <FileText className="mt-0.5 size-5 shrink-0" />
+          <FileTextIcon className="mt-0.5 size-5 shrink-0" />
           <div>
             <h3 className="mb-1.5 font-medium">
               <Link

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -5,7 +5,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { DASHBOARD_THIRDWEB_CLIENT_ID, isProd } from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
-import { CircleCheck, XIcon } from "lucide-react";
+import { CircleCheckIcon, XIcon } from "lucide-react";
 import { hostnameEndsWith } from "utils/url";
 import { PrimaryInfoItem } from "../server/primary-info-item";
 
@@ -67,7 +67,7 @@ export function ChainLiveStats(props: { rpc: string }) {
         titleIcon={
           stats.isSuccess ? (
             <ToolTipLabel label="Working">
-              <CircleCheck className="size-4 text-success-text" />
+              <CircleCheckIcon className="size-4 text-success-text" />
             </ToolTipLabel>
           ) : stats.isError ? (
             <ToolTipLabel label="Not Working">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -13,11 +13,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { getThirdwebClient } from "../../../../../../@/constants/thirdweb.server";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx

@@ -2,7 +2,7 @@
 
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Alert, AlertTitle } from "@/components/ui/alert";
-import { CircleSlash } from "lucide-react";
+import { CircleSlashIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb/contract";
 import type { Account } from "thirdweb/wallets";
 import { ModuleCard } from "./module-card";
@@ -37,7 +37,7 @@ export const InstalledModulesTable = (props: {
         {sectionTitle}
         <Alert variant="destructive">
           <div className="flex items-center gap-3">
-            <CircleSlash className="size-6 text-red-400" />
+            <CircleSlashIcon className="size-6 text-red-400" />
             <AlertTitle className="mb-0">No modules installed</AlertTitle>
           </div>
         </Alert>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/airdrop-form.tsx

@@ -3,7 +3,7 @@
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { CircleCheck, Upload } from "lucide-react";
+import { CircleCheckIcon, UploadIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { ThirdwebContract } from "thirdweb";
@@ -108,13 +108,13 @@ export const TokenAirdropForm: React.FC<TokenAirdropFormProps> = ({
                   colorScheme="primary"
                   borderRadius="md"
                   onClick={() => setAirdropFormOpen(true)}
-                  rightIcon={<Upload size={16} />}
+                  rightIcon={<UploadIcon className="size-4" />}
                 >
                   Upload addresses
                 </Button>
                 {addresses.length > 0 && (
                   <div className="flex flex-row items-center justify-center gap-2 text-green-500">
-                    <CircleCheck className="text-green-500" size={16} />
+                    <CircleCheckIcon className="text-green-500" size={16} />
                     <Text size="body.sm" color="inherit">
                       <strong>{addresses.length} addresses</strong> ready to be
                       airdropped

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/components/burn-button.tsx

@@ -12,7 +12,7 @@ import {
 import { FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Flame } from "lucide-react";
+import { FlameIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -66,7 +66,7 @@ export const TokenBurnButton: React.FC<TokenBurnButtonProps> = ({
           disabled={!hasBalance}
           className="gap-2"
         >
-          <Flame size={16} /> Burn
+          <FlameIcon className="size-4" /> Burn
         </Button>
       </SheetTrigger>
       <SheetContent>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/components/client/filters.tsx

@@ -11,7 +11,7 @@ import {
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { ChevronDownIcon, Filter, XIcon } from "lucide-react";
+import { ChevronDownIcon, FilterIcon, XIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
 import type React from "react";
 import { type PropsWithChildren, useCallback, useMemo } from "react";
@@ -32,7 +32,7 @@ export function AllFilters(props: { hideChainType?: boolean }) {
           variant="outline"
           className="h-10 w-auto gap-2 p-2 lg:h-10 lg:border-0 lg:px-4 lg:py-2"
         >
-          <Filter strokeWidth={1} className="lg:size-4" />
+          <FilterIcon strokeWidth={1} className="lg:size-4" />
           <span className="hidden lg:inline">All Filters</span>
         </Button>
       </PopoverTrigger>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/client/star-button.tsx

@@ -6,7 +6,7 @@ import { Button, type ButtonProps } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Star } from "lucide-react";
+import { StarIcon } from "lucide-react";
 import { useActiveAccount } from "thirdweb/react";
 
 async function favoriteChains() {
@@ -104,7 +104,7 @@ export function StarButton(props: {
         {mutation.isPending ? (
           <Spinner className={cn("size-6", props.iconClassName)} />
         ) : (
-          <Star
+          <StarIcon
             className={cn(
               "size-6 text-foreground transition-all",
               props.iconClassName,

apps/dashboard/src/app/(app)/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -11,7 +11,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { ArrowDown, WalletIcon } from "lucide-react";
+import { ArrowDownIcon, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import {
@@ -207,7 +207,7 @@ ${Object.keys(populatedTransaction)
         </Card>
 
         <div className="flex justify-center">
-          <ArrowDown />
+          <ArrowDownIcon className="size-4" />
         </div>
 
         <Card className="flex flex-col gap-4 p-4">
@@ -273,7 +273,7 @@ ${Object.keys(populatedTransaction)
       {state.message && (
         <>
           <div className="flex justify-center">
-            <ArrowDown />
+            <ArrowDownIcon className="size-4" />
           </div>
           <Card className="max-w-[800px] p-4">
             <p className="overflow-auto whitespace-pre-wrap font-mono text-sm">

apps/dashboard/src/app/(app)/components/Header/SecondaryNav/account-button.client.tsx

@@ -10,7 +10,7 @@ import {
 import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useEns } from "components/contract-components/hooks";
-import { LogOutIcon, Moon, Sun } from "lucide-react";
+import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useState } from "react";
@@ -107,13 +107,13 @@ export function AccountButton(props: {
             <p className="text-sm">Theme</p>
 
             <div className="ml-auto flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-foreground">
-              <Sun
+              <SunIcon
                 className={cn(
                   "size-4",
                   theme === "light" ? "opacity-100" : "opacity-30",
                 )}
               />
-              <Moon
+              <MoonIcon
                 className={cn(
                   "size-4",
                   theme === "dark" ? "opacity-100" : "opacity-30",

apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx

@@ -8,8 +8,8 @@ import { useEns } from "components/contract-components/hooks";
 import {
   LogOutIcon,
   MenuIcon,
-  Moon,
-  Sun,
+  MoonIcon,
+  SunIcon,
   UserRoundIcon,
   WalletIcon,
   XIcon,
@@ -213,7 +213,7 @@ export function MobileBurgerMenuButton(
             >
               <span className="text-base text-muted-foreground">Theme</span>
               <div className="ml-auto flex items-center gap-2 rounded-lg border px-2 py-1">
-                <Sun
+                <SunIcon
                   className={cn(
                     "size-4",
                     theme === "light"
@@ -221,7 +221,7 @@ export function MobileBurgerMenuButton(
                       : "text-muted-foreground",
                   )}
                 />
-                <Moon
+                <MoonIcon
                   className={cn(
                     "size-4",
                     theme === "dark"

apps/dashboard/src/app/(app)/project-showcase/[slug]/page.tsx

@@ -10,7 +10,7 @@ import {
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { PROJECT_SHOWCASE_DATA } from "lib/project-showcase-constants";
-import { ExternalLink, FileText } from "lucide-react";
+import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
 import Link from "next/link";
 
 export default async function DetailPage(props: {
@@ -52,7 +52,7 @@ export default async function DetailPage(props: {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <ExternalLink className="mr-2 h-4 w-4" />
+                  <ExternalLinkIcon className="mr-2 h-4 w-4" />
                   Visit Project Website
                 </Link>
               </Button>
@@ -63,7 +63,7 @@ export default async function DetailPage(props: {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <FileText className="mr-2 h-4 w-4" />
+                    <FileTextIcon className="mr-2 h-4 w-4" />
                     Link to Case Study
                   </Link>
                 </Button>

apps/dashboard/src/app/(app)/project-showcase/page.tsx

@@ -23,7 +23,7 @@ import {
   PROJECT_SHOWCASE_ITEMS_PER_PAGE,
 } from "lib/project-showcase-constants";
 import { getAbsoluteUrl } from "lib/vercel-utils";
-import { FileText } from "lucide-react";
+import { FileTextIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -171,7 +171,7 @@ export default async function ProjectShowcasePage(props: {
                           // onClick={(e) => e.stopPropagation()}
                         >
                           <Button variant="outline" size="sm">
-                            <FileText className="mr-2 h-4 w-4" /> Case Study
+                            <FileTextIcon className="mr-2 h-4 w-4" /> Case Study
                           </Button>
                         </Link>
                       )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx

@@ -18,7 +18,7 @@ import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandl
 import {
   AlertTriangleIcon,
   CheckIcon,
-  ChevronsUpDown,
+  ChevronsUpDownIcon,
   ExternalLinkIcon,
   PlusCircleIcon,
 } from "lucide-react";
@@ -78,7 +78,7 @@ function EcosystemSelect(props: {
           className="relative flex w-full justify-start truncate pr-8 pl-3 md:w-48"
         >
           <div className="truncate">{props.ecosystem?.name}</div>
-          <ChevronsUpDown className="absolute right-2 h-4 w-4 text-muted-foreground" />
+          <ChevronsUpDownIcon className="absolute right-2 h-4 w-4 text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-full md:w-48">

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/configuration/components/server/partners-table.tsx

@@ -14,7 +14,7 @@ import {
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
-import { Pencil, Trash2 } from "lucide-react";
+import { PencilIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import { Link } from "tw-components/link";
 import type { Ecosystem, Partner } from "../../../../../types";
@@ -146,7 +146,7 @@ function PartnerRow(props: {
               );
             }}
           >
-            <Pencil className="size-4" />
+            <PencilIcon className="size-4" />
             <span className="sr-only">Edit</span>
           </Button>
           <ConfirmationDialog
@@ -179,7 +179,7 @@ function PartnerRow(props: {
               className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
               disabled={isDeleting}
             >
-              <Trash2 className="size-4" />
+              <Trash2Icon className="size-4" />
               <span className="sr-only">Delete</span>
             </Button>
           </ConfirmationDialog>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx

@@ -63,7 +63,7 @@ import {
   Trash2Icon,
 } from "lucide-react";
 import { MoreHorizontalIcon } from "lucide-react";
-import { ArrowRight } from "lucide-react";
+import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -868,7 +868,7 @@ function EmptyEngineState(props: {
                   >
                     <Link href={`/team/${props.teamSlug}/~/engine/import`}>
                       Import self-hosted Engine
-                      <ArrowRight size={16} />
+                      <ArrowRightIcon size={16} />
                     </Link>
                   </Button>
                 </div>
@@ -902,14 +902,14 @@ function EmptyEngineState(props: {
                     <Button className="w-full gap-2" size="sm" asChild>
                       <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
                         Upgrade Plan
-                        <ArrowRight size={16} />
+                        <ArrowRightIcon size={16} />
                       </Link>
                     </Button>
                   ) : (
                     <Button className="w-full gap-2" size="sm" asChild>
                       <Link href={PRO_CONTACT_US_URL} target="_blank">
                         Contact Us
-                        <ArrowRight size={16} />
+                        <ArrowRightIcon size={16} />
                       </Link>
                     </Button>
                   )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { useEngineCreateWalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useTrack } from "hooks/analytics/useTrack";
-import { Plus } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { CredentialForm } from "./credential-form";
@@ -61,7 +61,7 @@ export const CreateWalletCredentialButton: React.FC<
           setIsOpen(true);
         }}
       >
-        <Plus className="mr-2 h-4 w-4" />
+        <PlusIcon className="mr-2 h-4 w-4" />
         Create Wallet Credential
       </Button>
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx

@@ -26,7 +26,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { format, formatDistanceToNowStrict } from "date-fns";
 import { useTrack } from "hooks/analytics/useTrack";
-import { MailQuestion, TrashIcon } from "lucide-react";
+import { MailQuestionIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Card, FormLabel, Text } from "tw-components";
@@ -137,7 +137,7 @@ export const WebhooksTable: React.FC<WebhooksTableProps> = ({
         isFetched={isFetched}
         onMenuClick={[
           {
-            icon: <MailQuestion className="size-4" />,
+            icon: <MailQuestionIcon className="size-4" />,
             text: "Test webhook",
             onClick: (row) => {
               setSelectedWebhook(row);

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/domain-verification.tsx

@@ -12,7 +12,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { AlertCircle, CheckCircle } from "lucide-react";
+import { AlertCircleIcon, CheckCircleIcon } from "lucide-react";
 import { useState } from "react";
 
 interface DomainVerificationFormProps {
@@ -142,7 +142,7 @@ export function TeamDomainVerificationCard({
             </div>
 
             <Alert variant="info">
-              <AlertCircle className="size-4" />
+              <AlertCircleIcon className="size-4" />
               <AlertTitle>
                 DNS changes can take up to 48 hours to propagate.
               </AlertTitle>
@@ -174,7 +174,7 @@ export function TeamDomainVerificationCard({
       <div>
         <div className="flex items-center justify-between">
           <div className="mt-2 flex items-start space-x-3">
-            <CheckCircle className="mt-0.5 h-5 w-5 text-green-500" />
+            <CheckCircleIcon className="mt-0.5 h-5 w-5 text-green-500" />
             <div>
               <p className="font-medium">{domainQuery.data.domain}</p>
               <p className="text-muted-foreground text-sm">

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/components/billing-history.tsx

@@ -13,10 +13,10 @@ import {
 } from "@/components/ui/table";
 import {
   ChevronLeftIcon,
-  ChevronRight,
-  CreditCard,
-  Download,
-  Receipt,
+  ChevronRightIcon,
+  CreditCardIcon,
+  DownloadIcon,
+  ReceiptIcon,
 } from "lucide-react";
 import { useQueryState } from "nuqs";
 import { useTransition } from "react";
@@ -78,14 +78,14 @@ export function BillingHistory(props: {
     if (props.status === "open") {
       return (
         <div className="py-6 text-center">
-          <Receipt className="mx-auto h-12 w-12 text-muted-foreground" />
+          <ReceiptIcon className="mx-auto h-12 w-12 text-muted-foreground" />
           <h3 className="mt-2 font-medium text-lg">No open invoices</h3>
         </div>
       );
     }
     return (
       <div className="py-6 text-center">
-        <Receipt className="mx-auto h-12 w-12 text-muted-foreground" />
+        <ReceiptIcon className="mx-auto h-12 w-12 text-muted-foreground" />
         <h3 className="mt-2 font-medium text-lg">No billing history</h3>
         <p className="mt-1 text-muted-foreground text-sm">
           Your invoice history will appear here once you have made payments.
@@ -130,7 +130,7 @@ export function BillingHistory(props: {
                             target="_blank"
                             rel="noopener noreferrer"
                           >
-                            <CreditCard className="mr-2 h-4 w-4 text-muted-foreground" />
+                            <CreditCardIcon className="mr-2 h-4 w-4 text-muted-foreground" />
                             Pay Now
                           </a>
                         </Button>
@@ -143,7 +143,7 @@ export function BillingHistory(props: {
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          <Download className="mr-2 h-4 w-4 text-muted-foreground" />
+                          <DownloadIcon className="mr-2 h-4 w-4 text-muted-foreground" />
                           PDF
                         </a>
                       </Button>
@@ -190,7 +190,7 @@ export function BillingHistory(props: {
             {isLoading && props.hasMore ? (
               <div className="ml-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
             ) : (
-              <ChevronRight className="ml-2 h-4 w-4" />
+              <ChevronRightIcon className="ml-2 h-4 w-4" />
             )}
           </Button>
         </div>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx

@@ -30,7 +30,7 @@ import {
   PlusIcon,
   SearchIcon,
   Trash2Icon,
-  UserPlus,
+  UserPlusIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
@@ -183,7 +183,7 @@ export function InviteSection(props: {
               {sendInvites.isPending ? (
                 <Spinner className="size-4" />
               ) : (
-                <UserPlus className="size-4" />
+                <UserPlusIcon className="size-4" />
               )}
               {form.watch("invites").length > 1
                 ? "Send Invites"

apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx

@@ -17,7 +17,6 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import {
   ArrowUpIcon,
   CheckIcon,
-  ChevronDown,
   ChevronDownIcon,
   CircleStopIcon,
   CopyIcon,
@@ -280,7 +279,7 @@ function WalletSelector(props: {
               }
             />
             {shortenAddress(props.activeAccountAddress)}
-            <ChevronDown className="size-3 text-muted-foreground/70" />
+            <ChevronDownIcon className="size-3 text-muted-foreground/70" />
           </AccountProvider>
         </Button>
       </PopoverTrigger>

apps/dashboard/src/components/contract-components/contract-deploy-form/deploy-context-modal.tsx

@@ -7,7 +7,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
-import { CircleCheck, CircleIcon } from "lucide-react";
+import { CircleCheckIcon, CircleIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useState } from "react";
 import { useActiveWallet } from "thirdweb/react";
@@ -142,7 +142,7 @@ function RenderDeployModalStep(props: DeployModalStepProps) {
           {isActive ? (
             <Spinner className="size-6 text-foreground" />
           ) : hasCompleted ? (
-            <CircleCheck className="size-6 text-green-500" />
+            <CircleCheckIcon className="size-6 text-green-500" />
           ) : (
             <CircleIcon className="size-6 text-muted-foreground" />
           )}

apps/dashboard/src/components/embedded-wallets/Users/index.tsx

@@ -16,7 +16,7 @@ import {
 import { createColumnHelper } from "@tanstack/react-table";
 import { TWTable } from "components/shared/TWTable";
 import { format } from "date-fns/format";
-import { ArrowLeft, ArrowRight } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import Papa from "papaparse";
 import { useCallback, useState } from "react";
 import type { WalletUser } from "thirdweb/wallets";
@@ -177,7 +177,7 @@ export function InAppWalletUsersPageContent(props: {
               onClick={() => setActivePage((p) => Math.max(1, p - 1))}
               disabled={activePage === 1 || walletsQuery.isPending}
             >
-              <ArrowLeft className="size-4" />
+              <ArrowLeftIcon className="size-4" />
               Previous
             </Button>
             <Button
@@ -188,7 +188,7 @@ export function InAppWalletUsersPageContent(props: {
               disabled={wallets.length === 0 || walletsQuery.isPending}
             >
               Next
-              <ArrowRight className="size-4" />
+              <ArrowRightIcon className="size-4" />
             </Button>
           </div>
         </div>

apps/dashboard/tsconfig.json

@@ -29,6 +29,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "lucide-react.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "additional.d.ts",

apps/playground-web/lucide-react.d.ts

@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}

apps/playground-web/src/components/blocks/multi-select.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import {
   forwardRef,
   useCallback,
@@ -215,7 +215,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                     orientation="vertical"
                     className="flex h-full min-h-6"
                   />
-                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                  <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
                 </div>
               </div>
             ) : (
@@ -223,7 +223,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                 <span className="text-muted-foreground text-sm">
                   {placeholder}
                 </span>
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
               </div>
             )}
           </Button>

apps/playground-web/src/components/blocks/upload-image.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { Upload } from "lucide-react";
+import { UploadIcon } from "lucide-react";
 import { type ChangeEvent, useRef, useState } from "react";
 
 export function UploadImage(props: {
@@ -67,7 +67,7 @@ export function UploadImage(props: {
         />
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center p-4 text-muted-foreground">
-          <Upload className="mb-2 h-8 w-8" />
+          <UploadIcon className="mb-2 h-8 w-8" />
           <p className="text-center text-sm">Upload Image</p>
         </div>
       )}

apps/playground-web/src/components/ui/Anchor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { Link as LinkIcon } from "lucide-react";
+import { LinkIcon } from "lucide-react";
 
 export function Anchor(props: {
   id: string;

apps/playground-web/src/components/ui/CustomAccordion.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import { useEffect, useId, useRef, useState } from "react";
 import { Anchor } from "./Anchor";
 import { DynamicHeight } from "./DynamicHeight";
@@ -106,7 +106,7 @@ export function CustomAccordion(props: CustomAccordionProps) {
             : "",
         )}
       >
-        <ChevronDown
+        <ChevronDownIcon
           className={cn(
             "ease size-4 shrink-0 transition-transform duration-300",
             isOpen && "rotate-180",

apps/playground-web/src/components/ui/breadcrumb.tsx

@@ -1,5 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -84,7 +84,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronRightIcon />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -99,7 +99,7 @@ const BreadcrumbEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 );

apps/playground-web/src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { CheckIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

apps/playground-web/src/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
+import { CircleIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <CircleIcon className="h-2.5 w-2.5 fill-current text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

apps/playground-web/src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -28,7 +28,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className={cn("h-4 w-4 opacity-50", chevronClassName)} />
+      <ChevronDownIcon className={cn("h-4 w-4 opacity-50", chevronClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -127,7 +127,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

apps/playground-web/tsconfig.json

@@ -22,6 +22,12 @@
     },
     "target": "ES2020"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "lucide-react.d.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

apps/portal/lucide-react.d.ts

@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}

apps/portal/src/app/Header.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import clsx from "clsx";
-import { ChevronDownIcon, Menu, TableOfContentsIcon } from "lucide-react";
+import { ChevronDownIcon, MenuIcon, TableOfContentsIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
@@ -165,7 +165,7 @@ export function Header() {
             className="p-2"
             onClick={() => setShowBurgerMenu(!showBurgerMenu)}
           >
-            <Menu className="size-7" />
+            <MenuIcon className="size-7" />
           </Button>
         </div>
 

apps/portal/src/app/changelog/[slug]/page.tsx

@@ -5,7 +5,7 @@ import { notFound } from "next/navigation";
 import ReactHtmlParser from "react-html-parser";
 import { fetchChangeLogs, fetchPost } from "../ghost";
 import "./styles.css";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeftIcon } from "lucide-react";
 import Link from "next/link";
 import { Button } from "../../../components/ui/button";
 import { Author } from "../components/Author";
@@ -30,7 +30,7 @@ export default async function Page(props: {
           href="/changelog"
           className="-translate-x-1/4 !p-2 !text-muted-foreground hover:!text-foreground mb-4 bg-transparent"
         >
-          <ArrowLeft className="size-6" />
+          <ArrowLeftIcon className="size-6" />
         </Link>
       </Button>
 

apps/portal/src/app/connect/sidebar.tsx

@@ -1,6 +1,6 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
 import { DotNetIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons";
-import { ExternalLink } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon";
 
 // TODO: move the following two slugs to walletSlug with updated docs
@@ -26,12 +26,12 @@ export const sidebar: SideBar = {
     {
       name: "Playground",
       href: "https://playground.thirdweb.com/",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       name: "Templates",
       href: "https://thirdweb.com/templates",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     { separator: true },
     // Connect\

apps/portal/src/app/dotnet/sidebar.tsx

@@ -1,6 +1,6 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
 import type { SidebarLink } from "@/components/others/Sidebar";
-import { CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
+import { CodeIcon, ExternalLinkIcon, ZapIcon } from "lucide-react";
 
 const walletProviders: SidebarLink = (() => {
   const parentSlug = "/dotnet/wallets/providers";
@@ -215,7 +215,7 @@ export const sidebar: SideBar = {
       name: "API Reference",
       href: "https://thirdweb-dev.github.io/dotnet/index.html",
       isCollapsible: false,
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       name: "Integrations",

apps/portal/src/app/insight/sidebar.tsx

@@ -1,16 +1,16 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
 import {
-  Album,
-  Box,
-  Braces,
-  Brain,
-  ExternalLink,
+  AlbumIcon,
+  BoxIcon,
+  BracesIcon,
+  BrainIcon,
+  ExternalLinkIcon,
   MessageCircleQuestionIcon,
-  Network,
-  Rocket,
-  StickyNote,
-  Webhook,
-  Wrench,
+  NetworkIcon,
+  RocketIcon,
+  StickyNoteIcon,
+  WebhookIcon,
+  WrenchIcon,
 } from "lucide-react";
 
 const insightSlug = "/insight";
@@ -21,37 +21,37 @@ export const sidebar: SideBar = {
     {
       name: "Overview",
       href: "/insight",
-      icon: <Box />,
+      icon: <BoxIcon />,
     },
     {
       name: "Use Cases",
       href: `${insightSlug}/use-cases`,
-      icon: <StickyNote />,
+      icon: <StickyNoteIcon />,
     },
     {
       name: "Playground",
       href: "https://playground.thirdweb.com/insight",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       name: "Get Started",
       href: `${insightSlug}/get-started`,
-      icon: <Rocket />,
+      icon: <RocketIcon />,
     },
     {
       name: "Blueprints",
       href: `${insightSlug}/blueprints`,
-      icon: <Album />,
+      icon: <AlbumIcon />,
     },
     {
       name: "Multichain Queries",
       href: `${insightSlug}/multichain-queries`,
-      icon: <Network />,
+      icon: <NetworkIcon />,
     },
     {
       name: "Agents & LLMs",
       href: `${insightSlug}/agents-and-llms`,
-      icon: <Brain />,
+      icon: <BrainIcon />,
       links: [
         {
           name: "llms.txt",
@@ -62,7 +62,7 @@ export const sidebar: SideBar = {
     {
       name: "Webhooks",
       href: `${insightSlug}/webhooks`,
-      icon: <Webhook />,
+      icon: <WebhookIcon />,
       links: [
         {
           name: "Getting Started",
@@ -89,12 +89,12 @@ export const sidebar: SideBar = {
     {
       name: "API Reference",
       href: "https://insight-api.thirdweb.com/reference",
-      icon: <Braces />,
+      icon: <BracesIcon />,
     },
     {
       name: "Troubleshoot",
       href: `${insightSlug}/troubleshoot`,
-      icon: <Wrench />,
+      icon: <WrenchIcon />,
     },
     {
       name: "FAQs",

apps/portal/src/app/nebula/sidebar.tsx

@@ -2,16 +2,16 @@ import type { SideBar } from "@/components/Layouts/DocLayout";
 import { NebulaSideIcon, TypeScriptIcon, UnityIcon } from "@/icons";
 
 import {
-  Blocks,
-  Braces,
-  Code,
-  ExternalLink,
-  Key,
-  MessageCircleQuestion,
-  PencilRuler,
-  Rocket,
-  Workflow,
-  Wrench,
+  BlocksIcon,
+  BracesIcon,
+  CodeIcon,
+  ExternalLinkIcon,
+  KeyIcon,
+  MessageCircleQuestionIcon,
+  PencilRulerIcon,
+  RocketIcon,
+  WorkflowIcon,
+  WrenchIcon,
 } from "lucide-react";
 
 export const sidebar: SideBar = {
@@ -25,12 +25,12 @@ export const sidebar: SideBar = {
     {
       name: "Prompt Guide",
       href: "/nebula/prompt-guide",
-      icon: <PencilRuler />,
+      icon: <PencilRulerIcon />,
     },
     {
       name: "Playground",
       href: "https://nebula.thirdweb.com",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       separator: true,
@@ -42,11 +42,11 @@ export const sidebar: SideBar = {
         {
           name: "Get Started",
           href: "/nebula/get-started",
-          icon: <Rocket />,
+          icon: <RocketIcon />,
         },
         {
           name: "Key Concepts",
-          icon: <Key />,
+          icon: <KeyIcon />,
           links: [
             {
               name: "Chat & Execute",
@@ -73,7 +73,7 @@ export const sidebar: SideBar = {
         {
           name: "API Reference",
           href: "/nebula/api-reference",
-          icon: <Braces />,
+          icon: <BracesIcon />,
           links: [
             {
               name: "Chat",
@@ -123,7 +123,7 @@ export const sidebar: SideBar = {
         },
         {
           name: "SDK Reference",
-          icon: <Code />,
+          icon: <CodeIcon />,
           links: [
             {
               name: "Typescript",
@@ -140,7 +140,7 @@ export const sidebar: SideBar = {
         {
           name: "Plugins & Integrations",
           href: "/nebula/plugins",
-          icon: <Blocks />,
+          icon: <BlocksIcon />,
           links: [
             {
               name: "OpenAI",
@@ -161,11 +161,11 @@ export const sidebar: SideBar = {
         {
           name: "Get Started",
           href: "/nebula/mcp-server/get-started",
-          icon: <Rocket />,
+          icon: <RocketIcon />,
         },
         {
           name: "Integrations",
-          icon: <Workflow />,
+          icon: <WorkflowIcon />,
           links: [
             {
               name: "Claude Desktop",
@@ -185,7 +185,7 @@ export const sidebar: SideBar = {
       links: [
         {
           name: "Python SDK",
-          icon: <Code />,
+          icon: <CodeIcon />,
           links: [
             {
               name: "Installation",
@@ -205,12 +205,12 @@ export const sidebar: SideBar = {
     {
       name: "Troubleshoot",
       href: "/nebula/troubleshoot",
-      icon: <Wrench />,
+      icon: <WrenchIcon />,
     },
     {
       name: "FAQs",
       href: "/nebula/faqs",
-      icon: <MessageCircleQuestion />,
+      icon: <MessageCircleQuestionIcon />,
     },
   ],
 };

apps/portal/src/app/react/v5/sidebar.tsx

@@ -1,4 +1,4 @@
-import { CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
+import { CodeIcon, ExternalLinkIcon, ZapIcon } from "lucide-react";
 import type { SideBar } from "../../../components/Layouts/DocLayout";
 
 const slug = "/react/v5";
@@ -21,7 +21,7 @@ export const sidebar: SideBar = {
     {
       name: "Live Playground",
       href: "https://playground.thirdweb.com/",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       name: "API Reference",

apps/portal/src/app/typescript/v5/sidebar.tsx

@@ -1,4 +1,4 @@
-import { CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
+import { CodeIcon, ExternalLinkIcon, ZapIcon } from "lucide-react";
 import type { SideBar } from "../../../components/Layouts/DocLayout";
 import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
 import {
@@ -27,7 +27,7 @@ export const sidebar: SideBar = {
     {
       name: "Live Playground",
       href: "https://playground.thirdweb.com/",
-      icon: <ExternalLink />,
+      icon: <ExternalLinkIcon />,
     },
     {
       name: "API Reference",

apps/portal/src/components/Document/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 
 type Crumb = {
@@ -21,7 +21,7 @@ export function Breadcrumb(props: { crumbs: Crumb[] }) {
               </Link>
               {i !== props.crumbs.length - 1 && (
                 <span className="text-muted-foreground opacity-50">
-                  <ChevronRight size={16} />
+                  <ChevronRightIcon className="size-4" />
                 </span>
               )}
             </li>

apps/portal/src/components/Document/Callout.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { AlertCircle, AlertTriangle, Info } from "lucide-react";
+import { AlertCircleIcon, AlertTriangleIcon, InfoIcon } from "lucide-react";
 
 export function Callout(props: {
   children: React.ReactNode;
@@ -25,14 +25,16 @@ export function Callout(props: {
           {!props.disableIcon && (
             <>
               {props.variant === "danger" && (
-                <AlertTriangle className="size-5 shrink-0" />
+                <AlertTriangleIcon className="size-5 shrink-0" />
               )}
 
               {props.variant === "warning" && (
-                <AlertCircle className="size-5 shrink-0 " />
+                <AlertCircleIcon className="size-5 shrink-0 " />
               )}
 
-              {props.variant === "info" && <Info className="size-5 shrink-0" />}
+              {props.variant === "info" && (
+                <InfoIcon className="size-5 shrink-0" />
+              )}
             </>
           )}
 

apps/portal/src/components/others/CustomAccordion.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import { useEffect, useId, useRef, useState } from "react";
 import { Anchor } from "../ui/Anchor";
 import { DynamicHeight } from "./DynamicHeight";
@@ -103,7 +103,7 @@ export function CustomAccordion(props: CustomAccordionProps) {
             : "",
         )}
       >
-        <ChevronDown
+        <ChevronDownIcon
           className={cn(
             "ease size-4 shrink-0 transition-transform duration-300",
             isOpen && "rotate-180",

apps/portal/src/components/others/DocSearch.tsx

@@ -13,11 +13,7 @@ import { Button } from "../ui/button";
 import type { SearchResult } from "@/app/api/search/types";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
-import {
-  Command as CommandIcon,
-  FileText as FileTextIcon,
-  Search as SearchIcon,
-} from "lucide-react";
+import { CommandIcon, FileTextIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { Spinner } from "../ui/Spinner/Spinner";
 import { Input } from "../ui/input";

apps/portal/src/components/others/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import clsx from "clsx";
-import { ChevronDown } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
 import type { StaticImport } from "next/dist/shared/lib/get-img-props";
 import Image from "next/image";
 import Link from "next/link";
@@ -252,7 +252,7 @@ export function DocSidebarMobile(props: ReferenceSideBarProps) {
       <DropdownMenuTrigger asChild>
         <Button className="w-full justify-between border bg-card py-3 text-left font-medium text-foreground xl:hidden">
           {props.name}
-          <ChevronDown
+          <ChevronDownIcon
             className={clsx(
               "size-4 text-muted-foreground transition-transform",
               open && "rotate-180",

apps/portal/src/components/ui/Anchor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { Link as LinkIcon } from "lucide-react";
+import { LinkIcon } from "lucide-react";
 
 export function Anchor(props: {
   id: string;

apps/portal/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -48,7 +48,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm text-muted-foreground ring-offset-accent transition-opacity hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-card data-[state=open]:text-foreground">
-        <X className="size-5" />
+        <XIcon className="size-5" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

apps/portal/src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto size-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="size-2 fill-current" />
+        <CircleIcon className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

apps/portal/src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -28,7 +28,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className={cn("size-4 opacity-50", chevronClassName)} />
+      <ChevronDownIcon className={cn("size-4 opacity-50", chevronClassName)} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -46,7 +46,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="size-4" />
+    <ChevronUpIcon className="size-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -63,7 +63,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="size-4" />
+    <ChevronDownIcon className="size-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -127,7 +127,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

apps/portal/tsconfig.json

@@ -28,7 +28,13 @@
     },
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "lucide-env.d.ts",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"],
   "ts-node": {
     "compilerOptions": {