update icon imports

tariknz · tariknz · commit 38c23976c9e2 · 2025-05-23T16:39:09.000+12:00
diff --git a/src/frontend/components/EditMode/EditMode.tsx b/src/frontend/components/EditMode/EditMode.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { useDashboard } from '@irdashies/context';
-import { Resize } from '@phosphor-icons/react';
+import { ResizeIcon } from '@phosphor-icons/react';
 
 export const EditMode = ({ children }: PropsWithChildren) => {
   const { editMode } = useDashboard();
@@ -9,7 +9,7 @@ export const EditMode = ({ children }: PropsWithChildren) => {
       <div className="relative w-full h-full">
         <div className="animate-pulse-border z-20 absolute w-full h-full border-solid border-2 border-sky-500 cursor-move">
           <div className="flex items-center gap-2 absolute top-0 right-0 py-1 px-2 bg-sky-500 text-white cursor-move">
-            <Resize /> <span>Edit Mode</span>
+            <ResizeIcon /> <span>Edit Mode</span>
           </div>
         </div>
         {children}
diff --git a/src/frontend/components/Input/InputSteer/InputSteer.tsx b/src/frontend/components/Input/InputSteer/InputSteer.tsx
@@ -1,11 +1,11 @@
-import { SteeringWheel } from '@phosphor-icons/react';
+import { SteeringWheelIcon } from '@phosphor-icons/react';
 
 export type InputSteerProps = object; // TODO
 
 export const InputSteer = () => {
   return (
     <div className="w-[120px]">
-      <SteeringWheel width="100%" height="100%" />
+      <SteeringWheelIcon width="100%" height="100%" />
     </div>
   );
 };
diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -1,4 +1,4 @@
-import { Gear, Lock, LockOpen, PresentationChart } from '@phosphor-icons/react';
+import { GearIcon, LockIcon, LockOpenIcon, PresentationChartIcon } from '@phosphor-icons/react';
 import { Link, Route, Routes, useLocation } from 'react-router-dom';
 import { StandingsSettings } from './sections/StandingsSettings';
 import { RelativeSettings } from './sections/RelativeSettings';
@@ -33,7 +33,7 @@ export const SettingsLayout = () => {
     <div className="flex flex-col gap-4 bg-slate-700 p-4 rounded-md w-full h-full">
       <div className="flex flex-row gap-4 items-center justify-between">
         <div className="flex flex-row gap-4 items-center">
-          <Gear size={32} weight="bold" />
+          <GearIcon size={32} weight="bold" />
           <h1 className="text-2xl font-bold">Overlay Setup</h1>
         </div>
         <div className="flex flex-row gap-2">
@@ -43,12 +43,12 @@ export const SettingsLayout = () => {
           >
             {isDemoMode ? (
               <>
-                <PresentationChart size={20} weight="bold" />
+                <PresentationChartIcon size={20} weight="bold" />
                 <span>Exit Demo</span>
               </>
             ) : (
               <>
-                <PresentationChart size={20} weight="bold" />
+                <PresentationChartIcon size={20} weight="bold" />
                 <span>Demo Mode</span>
               </>
             )}
@@ -59,12 +59,12 @@ export const SettingsLayout = () => {
           >
             {isLocked ? (
               <>
-                <Lock size={20} weight="bold" />
+                <LockIcon size={20} weight="bold" />
                 <span>Edit Layout (F6)</span>
               </>
             ) : (
               <>
-                <LockOpen size={20} weight="bold" />
+                <LockOpenIcon size={20} weight="bold" />
                 <span>Editing Layout (F6)</span>
               </>
             )}
diff --git a/src/frontend/components/Settings/sections/AboutSettings.tsx b/src/frontend/components/Settings/sections/AboutSettings.tsx
@@ -1,4 +1,4 @@
-import { GithubLogo, DiscordLogo } from '@phosphor-icons/react';
+import { GithubLogoIcon, DiscordLogoIcon } from '@phosphor-icons/react';
 import { useDashboard } from '@irdashies/context';
 
 export const AboutSettings = () => {
@@ -27,7 +27,7 @@ export const AboutSettings = () => {
           rel="noopener noreferrer"
           className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
         >
-          <GithubLogo size={24} weight="bold" />
+          <GithubLogoIcon size={24} weight="bold" />
           <span>GitHub Repository</span>
         </a>
 
@@ -37,7 +37,7 @@ export const AboutSettings = () => {
           rel="noopener noreferrer"
           className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
         >
-          <DiscordLogo size={24} weight="bold" />
+          <DiscordLogoIcon size={24} weight="bold" />
           <span>Join our Discord Community</span>
         </a>
       </div>
diff --git a/src/frontend/components/Standings/DriverClassHeader/DriverClassHeader.tsx b/src/frontend/components/Standings/DriverClassHeader/DriverClassHeader.tsx
@@ -1,4 +1,4 @@
-import { Barbell, Users } from '@phosphor-icons/react';
+import { BarbellIcon, UsersIcon } from '@phosphor-icons/react';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 
 interface DriverClassHeaderProps {
@@ -37,12 +37,12 @@ export const DriverClassHeader = ({
           >
             {sof ? (
               <>
-                <Barbell /> <span>{sof?.toFixed(0)}</span>
+                <BarbellIcon /> <span>{sof?.toFixed(0)}</span>
               </>
             ) : (
               ''
             )}{' '}
-            <Users />
+            <UsersIcon />
             <span>{totalDrivers}</span>
           </span>
         </div>
diff --git a/src/frontend/components/Standings/DriverInfoRow/DriverInfoRow.tsx b/src/frontend/components/Standings/DriverInfoRow/DriverInfoRow.tsx
@@ -1,4 +1,4 @@
-import { SpeakerHigh } from '@phosphor-icons/react';
+import { SpeakerHighIcon } from '@phosphor-icons/react';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 import { formatTime } from '@irdashies/utils/time';
 
@@ -70,7 +70,7 @@ export const DriverInfoRow = ({
             <span
               className={`animate-pulse transition-[width] duration-300 ${radioActive ? 'w-4 mr-1' : 'w-0 overflow-hidden'}`}
             >
-              <SpeakerHigh className="mt-[1px]" size={16} />
+              <SpeakerHighIcon className="mt-[1px]" size={16} />
             </span>
             <span className="truncate">{name}</span>
           </div>
diff --git a/src/frontend/components/Standings/SessionFooter/SessionFooter.tsx b/src/frontend/components/Standings/SessionFooter/SessionFooter.tsx
@@ -1,4 +1,4 @@
-import { Clock, Drop, RoadHorizon, Thermometer } from '@phosphor-icons/react';
+import { ClockIcon, DropIcon, RoadHorizonIcon, ThermometerIcon } from '@phosphor-icons/react';
 import { useCurrentTime } from '../hooks/useCurrentTime';
 import { useTrackWetness } from '../hooks/useTrackWetness';
 import { useTrackTemperature } from '../hooks/useTrackTemperature';
@@ -10,19 +10,19 @@ export const SessionFooter = () => {
   return (
     <div className="bg-slate-900/70 text-sm px-3 py-1 flex justify-between">
       <div className="flex flex-1 grow gap-1 items-center">
-        <Clock />
+        <ClockIcon />
         <span>{time}</span>
       </div>
       <div className="flex flex-1 grow gap-1 items-center justify-center text-nowrap">
-        <Drop />
+        <DropIcon />
         <span>{trackWetness}</span>
       </div>
       <div className="flex flex-1 grow gap-1 items-center justify-center">
-        <Thermometer />
+        <ThermometerIcon />
         <span>{airTemp}</span>
       </div>
       <div className="flex flex-1 grow gap-1 items-center justify-end">
-        <RoadHorizon />
+        <RoadHorizonIcon />
         <span>{trackTemp}</span>
       </div>
     </div>
diff --git a/src/frontend/components/Weather/WeatherTemp/WeatherTemp.tsx b/src/frontend/components/Weather/WeatherTemp/WeatherTemp.tsx
@@ -1,4 +1,4 @@
-import { Thermometer } from '@phosphor-icons/react';
+import { ThermometerIcon } from '@phosphor-icons/react';
 
 export interface WeatherTempProps {
   title: string;
@@ -9,7 +9,7 @@ export const WeatherTemp = ({ title, value }: WeatherTempProps) => {
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm w-full">
       <div className="flex flex-row gap-x-2 items-center text-sm">
-        <Thermometer />
+        <ThermometerIcon />
         <span className="grow">{title}</span>
         <div className="text-center">{value}</div>
       </div>
diff --git a/src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.tsx b/src/frontend/components/Weather/WeatherTrackWetness/WeatherTrackWetness.tsx
@@ -1,4 +1,4 @@
-import { Drop, Sun } from '@phosphor-icons/react';
+import { DropIcon, SunIcon } from '@phosphor-icons/react';
 
 // Track wetness constants
 const MIN_WETNESS = 1;
@@ -35,7 +35,7 @@ export const WeatherTrackWetness = ({
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
       <div className="flex items-center flex-row gap-x-1 mt-1">
-        <Sun />
+        <SunIcon />
         <div className="w-full bg-gray-700 rounded-full h-2.5">
           <div
             role="progressbar"
@@ -46,7 +46,7 @@ export const WeatherTrackWetness = ({
             className="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-in-out"
           ></div>
         </div>
-        <Drop />
+        <DropIcon />
       </div>
       <div className="text-center text-sm mt-1">{trackState}</div>
     </div>
diff --git a/src/frontend/components/Weather/WindDirection/WindDirection.tsx b/src/frontend/components/Weather/WindDirection/WindDirection.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { Wind } from '@phosphor-icons/react';
+import { WindIcon } from '@phosphor-icons/react';
 
 export interface WindDirectionProps {
   speedMs?: number;
@@ -12,7 +12,7 @@ export const WindDirection = ({ speedMs, direction }: WindDirectionProps) => {
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
       <div className="flex flex-row gap-x-2 items-center text-sm mb-3">
-        <Wind />
+        <WindIcon />
         <span className="grow">Wind</span>
       </div>
       <div
