wip: added lucide icons directly

I COULD use react-icons/lu but that would cause diff for the shadcn/ui components. So now I'll just use react-icons when I need to, which should be fine considering that both libraries can be tree shaken.
tabarra · Nov 10, 2023 · a1fc524 · a1fc524
1 parent 89b0396
commit a1fc524
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/panel/package.json b/panel/package.json
@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "jotai": "^2.4.3",
+    "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",

diff --git a/panel/src/components/GenericSpinner.tsx b/panel/src/components/GenericSpinner.tsx
@@ -1,10 +1,10 @@
-import { LuLoader2 } from "react-icons/lu";
+import { Loader2 } from "lucide-react";
 
 type Props = {
     msg?: string;
 }
 export default function GenericSpinner({ msg }: Props) {
     return <div className="text-xl text-muted-foreground">
-        <LuLoader2 className="inline animate-spin" /> {msg}
+        <Loader2 className="inline animate-spin" /> {msg}
     </div>;
 }
diff --git a/panel/src/components/MarkdownProse.tsx b/panel/src/components/MarkdownProse.tsx
@@ -1,7 +1,7 @@
 import { stripIndent } from '@/lib/utils';
 import Markdown, { Components } from 'react-markdown';
 import InlineCode from './InlineCode';
-import { LuExternalLink } from 'react-icons/lu';
+import { ExternalLink } from 'lucide-react';
 import { useLocation } from 'wouter';
 
 function CustomAnchor({ href, children }: { href?: string, children: React.ReactNode }) {
@@ -16,7 +16,7 @@ function CustomAnchor({ href, children }: { href?: string, children: React.React
     }
     return <button onClick={onClick} className="text-pink-600 no-underline hover:underline">
         {children}
-        {isExternal && <LuExternalLink className="inline ml-1 mb-1" />}
+        {isExternal && <ExternalLink className="inline ml-1 mb-1" />}
     </button>
 }
 

diff --git a/panel/src/components/SimpleThemeToggle.tsx b/panel/src/components/SimpleThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { LuMoon, LuSun } from 'react-icons/lu';
+import { Moon, Sun } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useTheme } from '@/hooks/useTheme';
 
@@ -14,8 +14,8 @@ export function SimpleThemeToggle() {
 
     return <>
         <Button variant="outline" size="icon" onClick={switchTheme}>
-            <LuSun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <LuMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
         </Button>
         {/* <Button variant="outline" size="icon" onClick={()=>{setTheme('deep-purple');}}>💜</Button> */}

diff --git a/panel/src/components/ui/checkbox.tsx b/panel/src/components/ui/checkbox.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { LuCheck } from "react-icons/lu"
+import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <LuCheck className="h-4 w-4" />
+      <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

diff --git a/panel/src/components/ui/navigation-menu.tsx b/panel/src/components/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
-import { LuChevronDown } from "react-icons/lu"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -54,7 +54,7 @@ const NavigationMenuTrigger = React.forwardRef<
     {...props}
   >
     {children}{" "}
-    <LuChevronDown
+    <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />

diff --git a/panel/src/layout/Header.tsx b/panel/src/layout/Header.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { LuMenu, LuMonitor, LuPersonStanding } from "react-icons/lu";
+import { Menu, Monitor, PersonStanding } from "lucide-react";
 import DesktopHeader from "./DesktopNavbar";
 import Avatar from "@/components/Avatar";
 import { useAuth } from "@/hooks/auth";
@@ -46,10 +46,8 @@ function ButtonToggleServerSheet({ className }: NavButtonProps) {
             title="Server Menu"
             onClick={() => setShowServer((show: boolean) => !show)}
         >
-            <i className="h-6 sm:h-4 flex items-center">
-                <LuMonitor size="24" />
-            </i>
-            <div className="hidden sm:flex flex-row min-w-max">
+            <Monitor className="h-6 w-6 sm:h-5 sm:w-5" />
+            <div className="hidden sm:flex flex-row min-w-max align-middle">
                 Server
             </div>
         </button>
@@ -59,9 +57,7 @@ function ButtonToggleServerSheet({ className }: NavButtonProps) {
 function ButtonToggleGlobalMenu({ className }: NavButtonProps) {
     return (
         <button className={cn(navButtonClasses, className)} title="Global Menu">
-            <i className="h-6 sm:h-4 flex items-center">
-                <LuMenu size="24" />
-            </i>
+            <Menu className="h-6 w-6 sm:h-5 sm:w-5" />
             <div className="hidden sm:flex flex-row min-w-max">
                 Menu
             </div>
@@ -75,9 +71,7 @@ function ButtonTogglePlayerlistSheet({ className }: NavButtonProps) {
 
     return (
         <button className={cn(navButtonClasses, className)} title="Playerlist">
-            <i className="h-6 sm:h-4 flex items-center">
-                <LuPersonStanding size="24" />
-            </i>
+            <PersonStanding className="h-6 w-6 sm:h-5 sm:w-5" />
             <div className="hidden sm:flex flex-row min-w-max">
                 Players
                 <span className="hidden lg:inline-block font-mono">: {playerCount}</span>

diff --git a/panel/src/layout/ServerSidebar.tsx b/panel/src/layout/ServerSidebar.tsx
@@ -1,7 +1,7 @@
 import MainPageLink from '@/components/MainPageLink';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { LuBox, LuChevronRightSquare, LuDna, LuEye, LuFileEdit, LuLayoutDashboard } from 'react-icons/lu';
+import { Box, ChevronRightSquare, Dna, Eye, FileEdit, LayoutDashboard } from 'lucide-react';
 import { useRoute } from 'wouter';
 
 //Separate component to prevent re-render of the entire menu
@@ -46,27 +46,27 @@ export function ServerSidebar() {
                 </h2>
                 <div className="space-y-1">
                     <ServerMenuLink href="/">
-                        <LuLayoutDashboard className="mr-2 h-4 w-4" />Dashboard
+                        <LayoutDashboard className="mr-2 h-4 w-4" />Dashboard
                     </ServerMenuLink>
                     <ServerMenuLink href="/server/console">
-                        <LuChevronRightSquare className="mr-2 h-4 w-4" />Live Console
+                        <ChevronRightSquare className="mr-2 h-4 w-4" />Live Console
                     </ServerMenuLink>
                     <ServerMenuLink href="/server/resources">
-                        <LuBox className="mr-2 h-4 w-4" />Resources
+                        <Box className="mr-2 h-4 w-4" />Resources
                     </ServerMenuLink>
                     <ServerMenuLink href="/server/server-log">
-                        <LuEye className="mr-2 h-4 w-4" />Server Log
+                        <Eye className="mr-2 h-4 w-4" />Server Log
                     </ServerMenuLink>
                     <ServerMenuLink href="/server/cfg-editor">
-                        <LuFileEdit className="mr-2 h-4 w-4" />CFG Editor
+                        <FileEdit className="mr-2 h-4 w-4" />CFG Editor
                     </ServerMenuLink>
                     {window.txConsts.showAdvanced && (
                         <ServerMenuLink href="/advanced" className='text-yellow-700 dark:text-yellow-200'>
-                            <LuDna className="mr-2 h-4 w-4" />Advanced
+                            <Dna className="mr-2 h-4 w-4" />Advanced
                         </ServerMenuLink>
                     )}
                     <ServerMenuLink href="/test" className='text-yellow-700 dark:text-yellow-200'>
-                        <LuDna className="mr-2 h-4 w-4" />Test
+                        <Dna className="mr-2 h-4 w-4" />Test
                     </ServerMenuLink>
                 </div>
             </div>

diff --git a/panel/src/pages/auth/AddMasterCallback.tsx b/panel/src/pages/auth/AddMasterCallback.tsx
@@ -8,7 +8,7 @@ import { Label } from "@radix-ui/react-label";
 import { ApiAddMasterCallbackFivemData, ApiAddMasterCallbackReq, ApiAddMasterCallbackResp, ApiAddMasterSaveReq, ApiAddMasterSaveResp, ApiOauthCallbackErrorResp } from "@shared/authApiTypes";
 import { useMutation } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
-import { LuLoader2 } from "react-icons/lu";
+import { Loader2 } from "lucide-react";
 import OauthErrors from "./components/OauthErrors";
 import GenericSpinner from "@/components/GenericSpinner";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -170,7 +170,7 @@ function RegisterForm({ fivemId, fivemName, profilePicture }: ApiAddMasterCallba
                 {errorMessage}
             </span>
             <Button className="w-full" disabled={submitMutation.isPending}>
-                {submitMutation.isPending && <LuLoader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {submitMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 Register
             </Button>
         </CardFooter>

diff --git a/panel/src/pages/auth/AddMasterPin.tsx b/panel/src/pages/auth/AddMasterPin.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { ApiAddMasterPinReq, ApiAddMasterPinResp } from "@shared/authApiTypes";
 import { useMutation } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
-import { LuLoader2 } from "react-icons/lu";
+import { Loader2 } from "lucide-react";
 
 export default function AddMasterPin() {
     const [isRedirecting, setIsRedirecting] = useState(false);
@@ -95,7 +95,7 @@ export default function AddMasterPin() {
             </CardContent>
             <CardFooter>
                 <Button className="w-full" disabled={disableInput}>
-                    {disableInput && <LuLoader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {disableInput && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                     Link Account
                 </Button>
             </CardFooter>

diff --git a/panel/src/pages/auth/Login.tsx b/panel/src/pages/auth/Login.tsx
@@ -9,7 +9,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useMutation } from '@tanstack/react-query';
-import { LuLoader2 } from "react-icons/lu";
+import { Loader2 } from "lucide-react";
 import { ApiOauthRedirectResp, ApiVerifyPasswordReq, ApiVerifyPasswordResp } from '@shared/authApiTypes';
 import { useAuth } from '@/hooks/auth';
 import './components/cfxreLoginButton.css';
@@ -124,7 +124,7 @@ export default function Login() {
                     >
                         {redirectMutation.isPending
                             ? <div className='w-[6rem]'>
-                                <LuLoader2 className="mx-auto h-5 w-5 animate-spin" />
+                                <Loader2 className="mx-auto h-5 w-5 animate-spin" />
                             </div>
                             : <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -167,7 +167,7 @@ export default function Login() {
             </CardContent>
             <CardFooter className='flex-col pb-0'>
                 <Button className="w-full" disabled={submitMutation.isPending}>
-                    {submitMutation.isPending && <LuLoader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {submitMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                     Login
                 </Button>
                 <div className="text-red-500 mt-2">