library icons changed with svg files;

client/components/SearchInput.tsx

@@ -2,15 +2,15 @@ import React, { useState } from 'react'
 import { SearchInputProps } from '@/types/index'
 import { Input } from './ui/input'
 import { Button } from './ui/button'
-import { Search } from 'lucide-react'
+import Image from 'next/image'
 
 const SearchInput = ({placeHolder}:SearchInputProps) => {
     const [input,setInput] = useState<string>('')
   return (
     <div className='boarder rounded-lg flex justify-between items-center'>
         <Input type='text' placeholder={placeHolder} className='boarder-none' />
         <Button variant={'ghost'} size={"icon"} >
-            <Search />
+            <Image src='/assets/icons/search.svg' width={23} height={23} alt='Search Icon' />
             <span className='sr-only'>Search Button</span>
         </Button>
     </div>

client/components/ui/checkbox.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -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" />
+      <Image alt="Check Icon" src={'/assets/icons/check.svg'} width={23} height={23} className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

client/components/ui/dropdown-menu.tsx

@@ -2,9 +2,10 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -34,7 +35,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <Image src={'/assets/icons/chevron-right.svg'} alt="chevron-right" width={23} height={23} className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -107,7 +108,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" />
+        <Image src="/assets/icons/check.svg" alt="check" width={23} height={23} className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

client/components/ui/input-otp.tsx

@@ -2,9 +2,9 @@
 
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
-    <Dot />
+    <Image src={'assets/icons/dot.svg'} alt="Dot" width={10} height={10} />
   </div>
 ))
 InputOTPSeparator.displayName = "InputOTPSeparator"

client/components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import Image from "next/image"
 
 import { cn } from "@/lib/utils"
 
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <Image src={'/assets/icons/chevron-down.svg'} width={23} height={23} alt="chevron-down" className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -44,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <Image src={'/assets/icons/chevron-up.svg'} alt="chevron-up" width={23} height={23} className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -61,7 +61,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <Image src={'/assets/icons/chevron-down.svg'} width={23} height={23} alt="chevron-down" className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -125,7 +125,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" />
+        <Image src="/assets/icons/check.svg" alt="check" width={23} height={23} className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

client/components/ui/sheet.tsx

@@ -3,9 +3,9 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 const Sheet = SheetPrimitive.Root
 
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm 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" />
+        <Image src={'/assets/icons/x.svg'} width={23} height={23} alt="X" className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>