chore: replace all radix icons with lucide (#1225)

* chore: replace all radix icons with lucide

* chore: use consistent naming of icons

* chore: further naming changes

---------

Co-authored-by: pavanjoshi914 <[email protected]>
Co-authored-by: Roland Bewick <[email protected]>

Author: 3 people

frontend/package.json

@@ -28,7 +28,6 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.1",

frontend/src/components/AuthCodeForm.tsx

@@ -1,4 +1,4 @@
-import { RefreshCw } from "lucide-react";
+import { RefreshCwIcon } from "lucide-react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Container from "src/components/Container";
@@ -97,7 +97,7 @@ function AuthCodeForm({ url }: AuthCodeFormProps) {
                   variant="outline"
                   onClick={() => url && openLink(url)}
                 >
-                  <RefreshCw className="w-4 h-4" />
+                  <RefreshCwIcon className="w-4 h-4" />
                 </Button>
               </div>
             </>

frontend/src/components/CardButton.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import { ReactElement } from "react";
 import { Link } from "react-router-dom";
 import { Card } from "src/components/ui/card";
@@ -21,7 +21,7 @@ function CardButton({ title, description, to }: Props) {
             <div className="text-muted-foreground text-sm">{description}</div>
           </div>
           <div>
-            <ChevronRight />
+            <ChevronRightIcon />
           </div>
         </div>
       </Card>

frontend/src/components/Loading.tsx

@@ -1,4 +1,4 @@
-import { Loader, Loader2 } from "lucide-react";
+import { Loader2Icon, LoaderIcon } from "lucide-react";
 import { cn } from "src/lib/utils";
 
 function Loading({
@@ -8,7 +8,7 @@ function Loading({
   className?: string;
   variant?: "loader2" | "loader";
 }) {
-  const Component = variant === "loader2" ? Loader2 : Loader;
+  const Component = variant === "loader2" ? Loader2Icon : LoaderIcon;
 
   return (
     <>

frontend/src/components/Permissions.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangleIcon, BrickWall, PlusCircle } from "lucide-react";
+import { AlertTriangleIcon, BrickWallIcon, PlusCircleIcon } from "lucide-react";
 import React from "react";
 import BudgetAmountSelect from "src/components/BudgetAmountSelect";
 import BudgetRenewalSelect from "src/components/BudgetRenewalSelect";
@@ -119,7 +119,7 @@ const Permissions: React.FC<PermissionsProps> = ({
       {permissions.isolated && (
         <>
           <div className="flex items-center gap-2 mb-2">
-            <BrickWall className="w-4 h-4" />
+            <BrickWallIcon className="w-4 h-4" />
             <p className="text-sm font-medium">Isolated App</p>
           </div>
 
@@ -147,7 +147,7 @@ const Permissions: React.FC<PermissionsProps> = ({
                   }}
                   className={cn("mr-4", showExpiryOptions && "mb-4")}
                 >
-                  <PlusCircle className="w-4 h-4 mr-2" />
+                  <PlusCircleIcon className="w-4 h-4 mr-2" />
                   Set budget
                 </Button>
               )}
@@ -204,7 +204,7 @@ const Permissions: React.FC<PermissionsProps> = ({
                 variant="secondary"
                 onClick={() => setShowExpiryOptions(true)}
               >
-                <PlusCircle className="w-4 h-4 mr-2" />
+                <PlusCircleIcon className="w-4 h-4 mr-2" />
                 Set expiration time
               </Button>
             )}

frontend/src/components/Scopes.tsx

@@ -1,9 +1,9 @@
 import {
-  ArrowDownUp,
-  BrickWall,
+  ArrowDownUpIcon,
+  BrickWallIcon,
   LucideIcon,
-  MoveDown,
-  SquarePen,
+  MoveDownIcon,
+  SquarePenIcon,
 } from "lucide-react";
 import React from "react";
 import { Checkbox } from "src/components/ui/checkbox";
@@ -16,10 +16,10 @@ type ScopeGroup = (typeof scopeGroups)[number];
 type ScopeGroupIconMap = { [key in ScopeGroup]: LucideIcon };
 
 const scopeGroupIconMap: ScopeGroupIconMap = {
-  full_access: ArrowDownUp,
-  read_only: MoveDown,
-  isolated: BrickWall,
-  custom: SquarePen,
+  full_access: ArrowDownUpIcon,
+  read_only: MoveDownIcon,
+  isolated: BrickWallIcon,
+  custom: SquarePenIcon,
 };
 
 const scopeGroupTitle: Record<ScopeGroup, string> = {

frontend/src/components/SidebarHint.tsx

@@ -1,4 +1,4 @@
-import { ListTodo, LucideIcon, Zap } from "lucide-react";
+import { ListTodoIcon, LucideIcon, ZapIcon } from "lucide-react";
 import { ReactElement } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "src/components/ui/button";
@@ -25,7 +25,7 @@ function SidebarHint() {
   ) {
     return (
       <SidebarHintCard
-        icon={Zap}
+        icon={ZapIcon}
         title="New Channel"
         description="You're currently opening a new channel"
         buttonText="View Channel"
@@ -44,7 +44,7 @@ function SidebarHint() {
   ) {
     return (
       <SidebarHintCard
-        icon={ListTodo}
+        icon={ListTodoIcon}
         title="Finish Setup"
         description={
           <>

frontend/src/components/SuggestedApps.tsx

@@ -1,4 +1,4 @@
-import { ExternalLinkIcon, Globe } from "lucide-react";
+import { ExternalLinkIcon, GlobeIcon } from "lucide-react";
 import { Link } from "react-router-dom";
 import ExternalLink from "src/components/ExternalLink";
 import { AppleIcon } from "src/components/icons/Apple";
@@ -39,7 +39,7 @@ function SuggestedAppCard({
           {webLink && (
             <ExternalLink to={webLink}>
               <Button variant="outline" size="icon">
-                <Globe className="w-4 h-4" />
+                <GlobeIcon className="w-4 h-4" />
               </Button>
             </ExternalLink>
           )}

frontend/src/components/TransactionItem.tsx

@@ -3,8 +3,8 @@ import utc from "dayjs/plugin/utc";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
-  ChevronDown,
-  ChevronUp,
+  ChevronDownIcon,
+  ChevronUpIcon,
   CopyIcon,
   XIcon,
 } from "lucide-react";
@@ -255,9 +255,9 @@ function TransactionItem({ tx }: Props) {
               >
                 Details
                 {showDetails ? (
-                  <ChevronUp className="w-4 h-4" />
+                  <ChevronUpIcon className="w-4 h-4" />
                 ) : (
-                  <ChevronDown className="w-4 h-4" />
+                  <ChevronDownIcon className="w-4 h-4" />
                 )}
               </div>
               {showDetails && (

frontend/src/components/TransactionsList.tsx

@@ -1,4 +1,4 @@
-import { Drum } from "lucide-react";
+import { DrumIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import EmptyState from "src/components/EmptyState";
 import Loading from "src/components/Loading";
@@ -57,7 +57,7 @@ function TransactionsList({
     <div ref={transactionListRef} className="transaction-list flex flex-col">
       {!transactions.length ? (
         <EmptyState
-          icon={Drum}
+          icon={DrumIcon}
           title="No transactions yet"
           description="Your most recent incoming and outgoing payments will show up here."
           buttonText="Receive Your First Payment"