refactor[genericIconComponent]: Remove unnecesary switch case

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -167,7 +167,6 @@ export default function ParameterComponent({
                 <IconComponent
                   name="Info"
                   style="relative bottom-0.5 ml-2 h-3 w-3"
-                  method="LUCIDE"
                 />
               </ShadTooltip>
             )}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -39,12 +39,6 @@ export default function GenericNode({
   const { sseData, isBuilding } = useSSE();
   const refHtml = useRef(null);
 
-  // useEffect(() => {
-  //   if (reactFlowInstance) {
-  //     setParams(Object.values(reactFlowInstance.toObject()));
-  //   }
-  // }, [save]);
-
   // New useEffect to watch for changes in sseData and update validation status
   useEffect(() => {
     const relevantData = sseData[data.id];
@@ -90,7 +84,6 @@ export default function GenericNode({
             <IconComponent
               name={name}
               style="generic-node-icon"
-              method="LUCIDE"
               iconColor={`${nodeColors[types[data.type]]}`}
             />
             <div className="generic-node-tooltip-div">
@@ -122,7 +115,6 @@ export default function GenericNode({
                       <IconComponent
                         name="Zap"
                         style="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
-                        method="LUCIDE"
                       />{" "}
                       flow to validate status.
                     </span>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -30,7 +30,6 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <IconComponent
-              method="LUCIDE"
               name="XCircle"
               style="h-5 w-5 text-status-red"
               aria-hidden="true"
@@ -69,7 +68,6 @@ export default function SingleAlert({
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
                   name="X"
-                  method="LUCIDE"
                   style="h-4 w-4 text-error-foreground"
                   aria-hidden="true"
                 />
@@ -85,7 +83,6 @@ export default function SingleAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="Info"
-              method="LUCIDE"
               style="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
@@ -121,7 +118,6 @@ export default function SingleAlert({
               >
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
-                  method="LUCIDE"
                   name="X"
                   style="h-4 w-4 text-info-foreground"
                   aria-hidden="true"
@@ -139,7 +135,6 @@ export default function SingleAlert({
             <IconComponent
               name="CheckCircle2"
               style="h-5 w-5 text-status-green"
-              method="LUCIDE"
               aria-hidden="true"
             />
           </div>
@@ -163,7 +158,6 @@ export default function SingleAlert({
                 <span className="sr-only">Dismiss</span>
                 <IconComponent
                   name="X"
-                  method="LUCIDE"
                   style="h-4 w-4 text-success-foreground"
                   aria-hidden="true"
                 />

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -36,17 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <IconComponent
+            <IconComponent name="Trash2" style="h-[1.1rem] w-[1.1rem]" />
-              name="Trash2"
-              method="LUCIDE"
-              style="h-[1.1rem] w-[1.1rem]"
-            />
           </button>
           <button
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <IconComponent method="LUCIDE" name="X" style="h-5 w-5" />
+            <IconComponent name="X" style="h-5 w-5" />
           </button>
         </div>
       </div>

src/frontend/src/alerts/error/index.tsx

@@ -46,7 +46,6 @@ export default function ErrorAlert({
           <div className="flex-shrink-0">
             <IconComponent
               name="XCircle"
-              method="LUCIDE"
               style="error-build-message-circle"
               aria-hidden="true"
             />

src/frontend/src/alerts/notice/index.tsx

@@ -44,7 +44,6 @@ export default function NoticeAlert({
               name="Info"
               style="h-5 w-5 text-status-blue "
               aria-hidden="true"
-              method="LUCIDE"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">

src/frontend/src/alerts/success/index.tsx

@@ -41,7 +41,6 @@ export default function SuccessAlert({
             <IconComponent
               name="CheckCircle2"
               style="success-alert-icon"
-              method="LUCIDE"
               aria-hidden="true"
             />
           </div>

src/frontend/src/components/cardComponent/index.tsx

@@ -37,11 +37,7 @@ export const CardComponent = ({
           <span className="card-component-title-size">{flow.name}</span>
           {onDelete && (
             <button className="card-component-delete-button" onClick={onDelete}>
-              <IconComponent
+              <IconComponent name="Trash2" style="card-component-delete-icon" />
-                name="Trash2"
-                style="card-component-delete-icon"
-                method="LUCIDE"
-              />
             </button>
           )}
         </CardTitle>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -193,7 +193,6 @@ export default function BuildTrigger({
                 <IconComponent
                   name="Zap"
                   style="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
-                  method="LUCIDE"
                 />
               )}
             </div>

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -58,7 +58,6 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
                 ? "message-button-icon"
                 : "disabled-message-button-icon")
             }
-            method="LUCIDE"
           />
         </div>
       </button>

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -72,7 +72,6 @@ export default function CodeAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              method="LUCIDE"
               style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")

src/frontend/src/components/dropdownComponent/index.tsx

@@ -47,7 +47,6 @@ export default function Dropdown({
                 </span>
                 <span className={"dropdown-component-arrow"}>
                   <IconComponent
-                    method="LUCIDE"
                     name="ChevronsUpDown"
                     style="dropdown-component-arrow-color"
                     aria-hidden="true"
@@ -102,7 +101,6 @@ export default function Dropdown({
                               )}
                             >
                               <IconComponent
-                                method="LUCIDE"
                                 name="Check"
                                 style={
                                   active

src/frontend/src/components/genericIconComponent/index.tsx

@@ -11,16 +11,10 @@ export function IconFromLucide({
 }
 
 export default function IconComponent({
-  method,
   name,
   style,
   iconColor,
 }: IconComponentProps): JSX.Element {
-  switch (method) {
+  const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-    case "LUCIDE":
+  return <TargetIcon className={style} style={{ color: iconColor }} />;
-      return <IconFromLucide name={name} style={style} iconColor={iconColor} />;
-    default:
-      console.error("IconComponent: invalid method");
-      return <IconFromLucide name={"unknown"} style={"unknown"} />;
-  }
 }

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -39,7 +39,7 @@ export const MenuBar = ({ flows, tabId }) => {
   return (
     <div className="round-button-div">
       <Link to="/">
-        <IconComponent name="ChevronLeft" style="w-4" method="LUCIDE" />
+        <IconComponent name="ChevronLeft" style="w-4" />
       </Link>
       <div className="header-menu-bar">
         <DropdownMenu>
@@ -47,11 +47,7 @@ export const MenuBar = ({ flows, tabId }) => {
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
                 <div className="header-menu-flow-name">{current_flow.name}</div>
-                <IconComponent
+                <IconComponent name="ChevronDown" style="h-4 w-4" />
-                  name="ChevronDown"
-                  style="h-4 w-4"
-                  method="LUCIDE"
-                />
               </div>
             </Button>
           </DropdownMenuTrigger>
@@ -63,11 +59,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent
+              <IconComponent name="Plus" style="header-menu-options" />
-                name="Plus"
-                style="header-menu-options"
-                method="LUCIDE"
-              />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -76,11 +68,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent
+              <IconComponent name="Settings2" style="header-menu-options " />
-                name="Settings2"
-                style="header-menu-options "
-                method="LUCIDE"
-              />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -89,11 +77,7 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent
+              <IconComponent name="Undo" style="header-menu-options " />
-                name="Undo"
-                style="header-menu-options "
-                method="LUCIDE"
-              />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -102,37 +86,9 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <IconComponent
+              <IconComponent name="Redo" style="header-menu-options " />
-                name="Redo"
-                style="header-menu-options "
-                method="LUCIDE"
-              />
               Redo
             </DropdownMenuItem>
-            {/* <DropdownMenuSeparator /> */}
-            {/* <DropdownMenuLabel>Projects</DropdownMenuLabel> */}
-            {/* <DropdownMenuRadioGroup className="max-h-full overflow-scroll"
-              value={tabId}
-              onValueChange={(value) => {
-                setTabId(value);
-              }}
-            >
-              {flows.map((flow, idx) => {
-                return (
-                  <Link
-                    to={"/flow/" + flow.id}
-                    className="flex w-full items-center"
-                  >
-                    <DropdownMenuRadioItem
-                      value={flow.id}
-                      className="flex-1 w-full inline-block truncate break-words mr-2"
-                    >
-                      {flow.name}
-                    </DropdownMenuRadioItem>
-                  </Link>
-                );
-              })}
-            </DropdownMenuRadioGroup> */}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>

src/frontend/src/components/headerComponent/index.tsx

@@ -51,7 +51,7 @@ export default function Header() {
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <IconComponent name="Home" method="LUCIDE" style="h-4 w-4" />
+            <IconComponent name="Home" style="h-4 w-4" />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -63,7 +63,7 @@ export default function Header() {
             }
             size="sm"
           >
-            <IconComponent method="LUCIDE" name="Users2" style="h-4 w-4" />
+            <IconComponent name="Users2" style="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
@@ -105,17 +105,9 @@ export default function Header() {
             }}
           >
             {dark ? (
-              <IconComponent
+              <IconComponent name="SunIcon" style="side-bar-button-size" />
-                name="SunIcon"
-                style="side-bar-button-size"
-                method="LUCIDE"
-              />
             ) : (
-              <IconComponent
+              <IconComponent name="MoonIcon" style="side-bar-button-size" />
-                name="MoonIcon"
-                style="side-bar-button-size"
-                method="LUCIDE"
-              />
             )}
           </button>
           <button
@@ -141,7 +133,6 @@ export default function Header() {
             {notificationCenter && <div className="header-notifications"></div>}
             <IconComponent
               name="Bell"
-              method="LUCIDE"
               style="side-bar-button-size"
               aria-hidden="true"
             />

src/frontend/src/components/inputFileComponent/index.tsx

@@ -110,7 +110,6 @@ export default function InputFileComponent({
           {!editNode && !loading && (
             <IconComponent
               name="FileSearch2"
-              method="LUCIDE"
               style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring " : " hover:text-accent-foreground")

src/frontend/src/components/inputListComponent/index.tsx

@@ -68,7 +68,6 @@ export default function InputListComponent({
                 <IconComponent
                   name="Plus"
                   style={"h-4 w-4 hover:text-accent-foreground"}
-                  method="LUCIDE"
                 />
               </button>
             ) : (
@@ -82,11 +81,7 @@ export default function InputListComponent({
                   onChange(inputList);
                 }}
               >
-                <IconComponent
+                <IconComponent name="X" style="h-4 w-4 hover:text-status-red" />
-                  name="X"
-                  style="h-4 w-4 hover:text-status-red"
-                  method="LUCIDE"
-                />
               </button>
             )}
           </div>

src/frontend/src/components/promptComponent/index.tsx

@@ -90,7 +90,6 @@ export default function PromptAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              method="LUCIDE"
               style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")

src/frontend/src/components/textAreaComponent/index.tsx

@@ -70,7 +70,6 @@ export default function TextAreaComponent({
           {!editNode && (
             <IconComponent
               name="ExternalLink"
-              method="LUCIDE"
               style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")

src/frontend/src/components/ui/checkbox.tsx

@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent name="Check" method="LUCIDE" style="h-4 w-4" />
+      <IconComponent name="Check" style="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

src/frontend/src/components/ui/dialog.tsx

@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
-        <IconComponent name="X" method="LUCIDE" style="h-4 w-4" />
+        <IconComponent name="X" style="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -33,11 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent
+    <IconComponent name="ChevronRight" style="ml-auto h-4 w-4" />
-      name="ChevronRight"
-      style="ml-auto h-4 w-4"
-      method="LUCIDE"
-    />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -110,7 +106,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <IconComponent name="Check" style="h-4 w-4" method="LUCIDE" />
+        <IconComponent name="Check" style="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -133,11 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <IconComponent
+        <IconComponent name="Circle" style="h-2 w-2 fill-current" />
-          name="Circle"
-          style="h-2 w-2 fill-current"
-          method="LUCIDE"
-        />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/frontend/src/components/ui/menubar.tsx

@@ -62,11 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <IconComponent
+    <IconComponent name="ChevronRight" style="ml-auto h-4 w-4" />
-      name="ChevronRight"
-      style="ml-auto h-4 w-4"
-      method="LUCIDE"
-    />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -144,7 +140,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <IconComponent name="Check" style="h-4 w-4" method="LUCIDE" />
+        <IconComponent name="Check" style="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -166,11 +162,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <IconComponent
+        <IconComponent name="Circle" style="h-2 w-2 fill-current" />
-          name="Circle"
-          style="h-2 w-2 fill-current"
-          method="LUCIDE"
-        />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}

src/frontend/src/modals/ApiModal/index.tsx

@@ -272,7 +272,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
             <IconComponent
-              method="LUCIDE"
               name="Code2"
               style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -112,7 +112,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                 <IconComponent
                   name="Variable"
                   style="edit-node-modal-variable "
-                  method="LUCIDE"
                 />
                 <span className="edit-node-modal-span">Parameters</span>
               </div>

src/frontend/src/modals/NodeModal/index.tsx

@@ -73,7 +73,6 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       name="X"
                       style="h-6 w-6"
                       aria-hidden="true"
-                      method="LUCIDE"
                     />
                   </button>
                 </div>

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -85,7 +85,6 @@ export default function CodeAreaModal({
           <span className="pr-2">Edit Code</span>
           <IconComponent
             name="prompts"
-            method="LUCIDE"
             style="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />

src/frontend/src/modals/exportModal/index.tsx

@@ -48,7 +48,6 @@ export default function ExportModal() {
             <span className="pr-2">Export</span>
             <IconComponent
               name="Download"
-              method="LUCIDE"
               style="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -51,11 +51,7 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <IconComponent
+            <IconComponent name="Settings2" style="mr-2 h-4 w-4 " />
-              name="Settings2"
-              style="mr-2 h-4 w-4 "
-              method="LUCIDE"
-            />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -80,21 +80,18 @@ export default function ChatInput({
             <IconComponent
               name="Lock"
               style="form-modal-lock-icon"
-              method="LUCIDE"
               aria-hidden="true"
             />
           ) : noInput ? (
             <IconComponent
               name="Sparkles"
               style="form-modal-play-icon"
-              method="LUCIDE"
               aria-hidden="true"
             />
           ) : (
             <IconComponent
               name="LucideSend"
               style="form-modal-send-icon "
-              method="LUCIDE"
               aria-hidden="true"
             />
           )}

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -165,7 +165,6 @@ export default function ChatMessage({
                   style={
                     "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
                   }
-                  method="LUCIDE"
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -44,7 +44,6 @@ export default function FileCard({ fileName, content, fileType }) {
               <IconComponent
                 name="DownloadCloud"
                 style="h-5 w-5 text-current hover:scale-110"
-                method="LUCIDE"
               />
             </button>
           </div>
@@ -64,7 +63,7 @@ export default function FileCard({ fileName, content, fileType }) {
             className="h-8 w-8"
           />
         ) : (
-          <IconComponent name="File" style="h-8 w-8" method="LUCIDE" />
+          <IconComponent name="File" style="h-8 w-8" />
         )}
         <div className="file-card-modal-footer">
           {" "}
@@ -74,7 +73,6 @@ export default function FileCard({ fileName, content, fileType }) {
         <IconComponent
           name="DownloadCloud"
           style="ml-auto h-6 w-6 text-current"
-          method="LUCIDE"
         />
       </div>
     </button>

src/frontend/src/modals/formModal/index.tsx

@@ -399,7 +399,6 @@ export default function FormModal({
               <IconComponent
                 name="prompts"
                 style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
-                method="LUCIDE"
                 aria-hidden="true"
               />
             </DialogTitle>
@@ -412,7 +411,6 @@ export default function FormModal({
                 <IconComponent
                   name="Variable"
                   style=" file-component-variable"
-                  method="LUCIDE"
                 />
                 <span className="file-component-variables-span text-md">
                   Input Variables
@@ -516,7 +514,6 @@ export default function FormModal({
                           : "text-primary hover:text-gray-600"
                       )}
                       aria-hidden="true"
-                      method="LUCIDE"
                     />
                   </button>
                 </div>

src/frontend/src/modals/genericModal/index.tsx

@@ -174,7 +174,6 @@ export default function GenericModal({
           <span className="pr-2">{myModalTitle}</span>
           <IconComponent
             name="FileText"
-            method="LUCIDE"
             style="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
@@ -227,7 +226,6 @@ export default function GenericModal({
                   <div className="max-h-20 overflow-y-auto custom-scroll">
                     <div className="flex flex-wrap items-center">
                       <IconComponent
-                        method="LUCIDE"
                         name="Variable"
                         style=" -ml-px mr-1 flex h-4 w-4 text-primary"
                       />

src/frontend/src/pages/CommunityPage/index.tsx

@@ -40,7 +40,7 @@ export default function CommunityPage() {
     <div className="community-page-arrangement">
       <div className="community-page-nav-arrangement">
         <span className="community-page-nav-title">
-          <IconComponent name="Users2" style="w-6" method="LUCIDE" />
+          <IconComponent name="Users2" style="w-6" />
           Community Examples
         </span>
         <div className="community-page-nav-button">
@@ -50,11 +50,7 @@ export default function CommunityPage() {
             rel="noreferrer"
           >
             <Button variant="primary">
-              <IconComponent
+              <IconComponent name="GithubIcon" style="main-page-nav-button" />
-                method="LUCIDE"
-                name="GithubIcon"
-                style="main-page-nav-button"
-              />
               Add Your Example
             </Button>
           </a>
@@ -83,11 +79,7 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <IconComponent
+                  <IconComponent name="GitFork" style="main-page-nav-button" />
-                    name="GitFork"
-                    style="main-page-nav-button"
-                    method="LUCIDE"
-                  />
                   Fork Example
                 </Button>
               }

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -29,7 +29,6 @@ export default function DisclosureComponent({
                     style={`${
                       open || openDisc ? "rotate-90 transform" : ""
                     } h-4 w-4 text-foreground`}
-                    method="LUCIDE"
                   />
                 </div>
               </div>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -65,15 +65,10 @@ export default function ExtraSidebar() {
           <button
             className="extra-side-bar-buttons"
             onClick={() => {
-              // openPopUp(<ImportModal />);
               uploadFlow();
             }}
           >
-            <IconComponent
+            <IconComponent name="FileUp" style="side-bar-button-size " />
-              name="FileUp"
-              method="LUCIDE"
-              style="side-bar-button-size "
-            />
           </button>
         </ShadTooltip>
 
@@ -84,11 +79,7 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <IconComponent
+            <IconComponent name="FileDown" style="side-bar-button-size" />
-              name="FileDown"
-              method="LUCIDE"
-              style="side-bar-button-size"
-            />
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
@@ -98,11 +89,7 @@ export default function ExtraSidebar() {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <IconComponent
+            <IconComponent name="Code2" style="side-bar-button-size" />
-              name="Code2"
-              method="LUCIDE"
-              style="side-bar-button-size"
-            />
           </button>
         </ShadTooltip>
 
@@ -117,7 +104,6 @@ export default function ExtraSidebar() {
           >
             <IconComponent
               name="Save"
-              method="LUCIDE"
               style={
                 "side-bar-button-size" +
                 (isPending ? " " : " extra-side-bar-save-disable")
@@ -140,7 +126,6 @@ export default function ExtraSidebar() {
           }}
         />
         <div className="search-icon">
-          {/* ! replace hash color here */}
           <Search size={20} strokeWidth={1.5} className="text-primary" />
         </div>
       </div>
@@ -198,7 +183,6 @@ export default function ExtraSidebar() {
                               <IconComponent
                                 name="Menu"
                                 style="side-bar-components-icon "
-                                method="LUCIDE"
                               />
                             </div>
                           </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -36,7 +36,7 @@ const NodeToolbarComponent = (props) => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <IconComponent name="Trash2" style="h-4 w-4" method="LUCIDE" />
+              <IconComponent name="Trash2" style="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -61,7 +61,7 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <IconComponent name="Copy" style="h-4 w-4" method="LUCIDE" />
+              <IconComponent name="Copy" style="h-4 w-4" />
             </button>
           </ShadTooltip>
 
@@ -90,7 +90,7 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <IconComponent name="FileText" style="h-4 w-4 " method="LUCIDE" />
+              <IconComponent name="FileText" style="h-4 w-4 " />
             </a>
           </ShadTooltip>
 
@@ -110,11 +110,7 @@ const NodeToolbarComponent = (props) => {
                 props.openPopUp(<EditNodeModal data={props.data} />);
               }}
             >
-              <IconComponent
+              <IconComponent name="Settings2" style="h-4 w-4 " />
-                name="Settings2"
-                style="h-4 w-4 "
-                method="LUCIDE"
-              />
             </button>
           </ShadTooltip>
         </span>

src/frontend/src/pages/MainPage/index.tsx

@@ -16,7 +16,7 @@ export default function HomePage() {
     <div className="main-page-panel">
       <div className="main-page-nav-arrangement">
         <span className="main-page-nav-title">
-          <IconComponent name="Home" style="w-6" method="LUCIDE" />
+          <IconComponent name="Home" style="w-6" />
           {USER_PROJECTS_HEADER}
         </span>
         <div className="button-div-style">
@@ -26,11 +26,7 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <IconComponent
+            <IconComponent name="Download" style="main-page-nav-button" />
-              name="Download"
-              style="main-page-nav-button"
-              method="LUCIDE"
-            />
             Download Collection
           </Button>
           <Button
@@ -39,11 +35,7 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <IconComponent
+            <IconComponent name="Upload" style="main-page-nav-button" />
-              name="Upload"
-              style="main-page-nav-button"
-              method="LUCIDE"
-            />
             Upload Collection
           </Button>
           <Button
@@ -54,11 +46,7 @@ export default function HomePage() {
               });
             }}
           >
-            <IconComponent
+            <IconComponent name="Plus" style="main-page-nav-button" />
-              name="Plus"
-              style="main-page-nav-button"
-              method="LUCIDE"
-            />
             New Project
           </Button>
         </div>
@@ -82,7 +70,6 @@ export default function HomePage() {
                   <IconComponent
                     name="ExternalLink"
                     style="main-page-nav-button"
-                    method="LUCIDE"
                   />
                   Edit Flow
                 </Button>

src/frontend/src/types/components/index.ts

@@ -169,7 +169,6 @@ export type IconProps = {
 };
 
 export type IconComponentProps = {
-  method: "SVG" | "LUCIDE";
   name: string;
   style: string;
   iconColor?: string;