Migrated to react-icons

apps/scouting/frontend/src/scouter/components/ConfirmDeletePopup.tsx

@@ -1,6 +1,7 @@
 // בס"ד
 import type { FC } from "react";
-import { AlertTriangle, X } from "lucide-react";
+import { FiAlertTriangle } from "react-icons/fi";
+import { IoClose } from "react-icons/io5";
 
 interface ConfirmDeletePopupProps {
   onDelete: () => void;
@@ -28,13 +29,13 @@ export const ConfirmDeletePopup: FC<ConfirmDeletePopupProps> = ({
           onClick={close}
           className="absolute top-4 right-4 text-slate-500 hover:text-slate-200 transition-colors"
         >
-          <X size={20} />
+          <IoClose size={20} />
         </button>
 
         <div className="flex flex-col items-center text-center">
           {/* Warning Icon */}
           <div className="w-16 h-16 bg-rose-500/20 rounded-2xl flex items-center justify-center mb-4">
-            <AlertTriangle className="text-rose-500" size={32} />
+            <FiAlertTriangle className="text-rose-500" size={32} />
           </div>
 
           <h3 className="text-xl font-bold text-slate-100 mb-2">

apps/scouting/frontend/src/strategy/GeneralDataTable.tsx

@@ -15,7 +15,8 @@ import type {
 } from "@repo/scouting_types";
 import type React from "react";
 import { useState, useEffect, useMemo } from "react";
-import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { HiOutlineChevronUpDown } from "react-icons/hi2";
 
 interface TableRow {
   teamNumber: number;
@@ -134,11 +135,11 @@ export const GeneralDataTable: React.FC<GeneralDataTableProps> = ({
                       )}
                       <span className="text-emerald-500/50">
                         {header.column.getIsSorted() === "asc" ? (
-                          <ChevronUp size={12} strokeWidth={3} />
+                          <FaChevronUp size={12} strokeWidth={3} />
                         ) : header.column.getIsSorted() === "desc" ? (
-                          <ChevronDown size={12} strokeWidth={3} />
+                          <FaChevronDown size={12} strokeWidth={3} />
                         ) : (
-                          <ChevronsUpDown size={12} strokeWidth={2} />
+                          <HiOutlineChevronUpDown size={12} strokeWidth={2} />
                         )}
                       </span>
                     </div>

apps/scouting/frontend/src/strategy/components/AccuracyChart.tsx

@@ -1,6 +1,8 @@
 // בס"ד
 import type { FC } from "react";
-import { Target, Crosshair, Locate } from "lucide-react";
+import { FiTarget, FiCrosshair } from "react-icons/fi";
+import { IoLocate } from "react-icons/io5";
+
 import { firstElement } from "@repo/array-functions";
 
 interface AccuracyChartProps {
@@ -29,17 +31,17 @@ export const AccuracyChart: FC<AccuracyChartProps> = ({ metrics }) => {
     {
       label: "Meter",
       value: metrics.meter,
-      icon: <Target size={ICON_SIZE} />,
+      icon: <FiTarget size={ICON_SIZE} />,
     },
     {
       label: "2 Meters",
       value: metrics.twoMeter,
-      icon: <Crosshair size={ICON_SIZE} />,
+      icon: <FiCrosshair size={ICON_SIZE} />,
     },
     {
       label: "More",
       value: metrics.more,
-      icon: <Locate size={ICON_SIZE} />,
+      icon: <IoLocate size={ICON_SIZE} />,
     },
   ];
 
@@ -50,7 +52,6 @@ export const AccuracyChart: FC<AccuracyChartProps> = ({ metrics }) => {
           key={card.label}
           className="relative overflow-hidden bg-slate-900/40 backdrop-blur-md border border-white/5 p-3 rounded-2xl flex flex-col items-center gap-1 shadow-xl"
         >
-
           <div
             className={`absolute -bottom-4 -right-4 w-12 h-12 blur-2xl opacity-20 rounded-full ${firstElement(getProgressColor(card.value).split(" ")).replace("text", "bg")}`}
           />

apps/scouting/frontend/src/strategy/components/PhaseToggle.tsx

@@ -1,7 +1,10 @@
 // בס"ד
-import type { FC, ForwardRefExoticComponent, RefAttributes } from "react";
-import { Zap, Play, LayoutGrid, type LucideProps } from "lucide-react";
+import type { FC } from "react";
+import { FiZap } from "react-icons/fi";
 import type { GamePhase } from "@repo/scouting_types";
+import type { IconType } from "react-icons/lib";
+import { IoPlayOutline } from "react-icons/io5";
+import { LuLayoutGrid } from "react-icons/lu";
 
 const ACTIVE_SIZE = 3;
 const INACTIVE_SIZE = 2;
@@ -12,13 +15,11 @@ export const PhaseToggle: FC<{
   const options: {
     id: GamePhase;
     label: string;
-    icon: ForwardRefExoticComponent<
-      Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
-    >;
+    icon: IconType;
   }[] = [
-    { id: "auto", label: "Auto", icon: Play },
-    { id: "tele", label: "Tele", icon: Zap },
-    { id: "fullGame", label: "Full", icon: LayoutGrid },
+    { id: "auto", label: "Auto", icon: IoPlayOutline },
+    { id: "tele", label: "Tele", icon: FiZap },
+    { id: "fullGame", label: "Full", icon: LuLayoutGrid },
   ];
 
   const handlePress = (mode: GamePhase) => {

apps/scouting/frontend/src/strategy/components/TeamSelect.tsx

@@ -1,7 +1,8 @@
 // בס"ד
 import { FRC_TEAMS } from "@repo/frc";
 import type { FC } from "react";
-import { Users, Hash } from "lucide-react";
+import { LuUsers } from "react-icons/lu";
+import { LuHash } from "react-icons/lu";
 
 interface TeamSelectProps {
   teamNumber?: number;
@@ -17,7 +18,7 @@ export const TeamSelect: FC<TeamSelectProps> = ({
   <div className="flex flex-col sm:flex-row gap-3 w-full max-w-md mx-auto p-4 bg-slate-900/40 backdrop-blur-sm rounded-2xl border border-white/10 shadow-2xl">
     <div className="relative flex-1">
       <div className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-500/50">
-        <Hash size={16} />
+        <LuHash size={16} />
       </div>
       <input
         onChange={(event) => {
@@ -32,7 +33,7 @@ export const TeamSelect: FC<TeamSelectProps> = ({
 
     <div className="relative flex-2">
       <div className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-500/50 pointer-events-none">
-        <Users size={16} />
+        <LuUsers size={16} />
       </div>
       <select
         className="w-full pl-10 pr-4 py-3 bg-slate-950/50 border border-white/5 rounded-xl text-slate-200 appearance-none focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500/50 transition-all cursor-pointer font-bold text-sm"

package.json

@@ -56,7 +56,6 @@
     "http-status-codes": "^2.3.0",
     "io-ts": "^2.2.22",
     "is-odd": "^3.0.1",
-    "lucide-react": "^0.563.0",
     "mongodb": "^7.0.0",
     "qrcode.react": "^4.2.0",
     "react-chartjs-2": "^5.3.1",