feat: migrate to lucide icons

package.json

@@ -26,7 +26,6 @@
     ]
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.5",
     "@million/lint": "^1.0.11",
     "@react-hook/window-size": "^3.1.1",
     "@tanstack/react-query": "^5.59.16",
@@ -39,6 +38,7 @@
     "date-fns": "^4.1.0",
     "i18next": "^23.16.4",
     "i18next-resources-to-backend": "^1.2.1",
+    "lucide-react": "^0.456.0",
     "md5": "^2.3.0",
     "react": "19.0.0-rc-6cf85185-20241014",
     "react-dom": "19.0.0-rc-6cf85185-20241014",
@@ -129,9 +129,6 @@
     ]
   },
   "overrides": {
-    "@heroicons/react": {
-      "react": "$react"
-    },
     "@react-hook/window-size": {
       "react": "$react"
     },

src/Components/AlbumHeader.tsx

@@ -1,7 +1,7 @@
 import type { SongIds, Songs } from "@api/types.js";
-import { ArrowsRightLeftIcon, PlayIcon } from "@heroicons/react/24/solid";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { Link } from "@tanstack/react-router";
+import { Play, Shuffle } from "lucide-react";
 import { SyntheticEvent, memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -76,14 +76,14 @@ function AlbumHeader({ album, tracks }: Readonly<AlbumHeaderProps>) {
           <h3>{album.year}</h3>
           <div className="flex flex-col gap-2">
             <Button
-              renderIcon={() => <PlayIcon className="w-6" />}
+              renderIcon={() => <Play className="w-6" />}
               onClick={playAll}
             >
               <span className="flex-grow">{t("playAll")}</span>
             </Button>
 
             <Button
-              renderIcon={() => <ArrowsRightLeftIcon className="w-6" />}
+              renderIcon={() => <Shuffle className="w-6" />}
               onClick={shuffleAll}
             >
               <span className="flex-grow">{t("shuffleAll")}</span>

src/Components/EpisodeListItem.tsx

@@ -1,12 +1,12 @@
 import { downloadEpisode, isDownloadedEpisode } from "@/api/podcasts.js";
 import { Episode } from "@api/types.js";
-import { ArrowDownTrayIcon, PlayIcon } from "@heroicons/react/24/solid";
 import { useAuth } from "@hooks/useAuth.js";
 import { useEpisodes } from "@hooks/useEpisodes.js";
 import { useTrackList } from "@hooks/useTrackList.js";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns/format";
 import { parseISO } from "date-fns/parseISO";
+import { Download, Play } from "lucide-react";
 import { SyntheticEvent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -51,7 +51,7 @@ function EpisodeListItem({ episode }: Readonly<EpisodeListItemProps>) {
       className={`flex w-full flex-shrink-0 gap-6 md:block md:w-6`}
       title={t("media:playTrack")}
     >
-      <PlayIcon className={`w-6 flex-shrink-0 md:w-full`} />
+      <Play className={`w-6 flex-shrink-0 md:w-full`} />
       <span className={`truncate md:hidden`}>{episode.title}</span>
     </button>
   );
@@ -61,7 +61,7 @@ function EpisodeListItem({ episode }: Readonly<EpisodeListItemProps>) {
       className={`flex w-full flex-shrink-0 gap-6 md:block md:w-6`}
       title={`Currently Playing`}
     >
-      <PlayIcon className={`w-6 flex-shrink-0 text-green-400 md:w-full`} />
+      <Play className={`w-6 flex-shrink-0 text-green-400 md:w-full`} />
       <span className={`truncate md:hidden`}>{episode.title}</span>
     </div>
   );
@@ -72,7 +72,7 @@ function EpisodeListItem({ episode }: Readonly<EpisodeListItemProps>) {
       className={`flex w-full flex-shrink-0 gap-6 md:block md:w-6`}
       title={t("podcasts:downloadEpisode")}
     >
-      <ArrowDownTrayIcon className={`w-6 flex-shrink-0 md:w-full`} />
+      <Download className={`w-6 flex-shrink-0 md:w-full`} />
       <span className={`truncate md:hidden`}>{episode.title}</span>
     </button>
   );

src/Components/MediaControls/FullscreenButton.tsx

@@ -1,8 +1,5 @@
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-} from "@heroicons/react/24/solid";
 import { useFullscreen } from "@hooks/useFullscreen";
+import { Expand, Shrink } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -26,7 +23,7 @@ function FullscreenButton() {
         title={t("exitFullscreen")}
         onClick={fullScreen}
       >
-        <ArrowsPointingInIcon className={`w-full`} />
+        <Shrink className={`w-full`} />
       </button>
     );
   }
@@ -37,7 +34,7 @@ function FullscreenButton() {
       title={t("enterFullscreen")}
       onClick={fullScreen}
     >
-      <ArrowsPointingOutIcon className={`w-full`} />
+      <Expand className={`w-full`} />
     </button>
   );
 }

src/Components/MediaControls/PauseButton.tsx

@@ -1,5 +1,5 @@
-import { PauseIcon } from "@heroicons/react/24/solid";
 import { useAudio } from "@hooks/useAudio";
+import { Pause } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -21,7 +21,7 @@ function PauseButton() {
       title={t("pauseTrack")}
       onClick={pause}
     >
-      <PauseIcon className={`w-full`} />
+      <Pause className={`w-full`} />
     </button>
   );
 }

src/Components/MediaControls/PlayButton.tsx

@@ -1,5 +1,5 @@
-import { PlayIcon } from "@heroicons/react/24/solid";
 import { useAudio } from "@hooks/useAudio";
+import { Play } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -19,7 +19,7 @@ function PlayButton() {
       title={t("playTrack")}
       onClick={play}
     >
-      <PlayIcon className={`w-full`} />
+      <Play className={`w-full`} />
     </button>
   );
 }

src/Components/MediaControls/SkipButton.tsx

@@ -1,5 +1,5 @@
-import { ForwardIcon } from "@heroicons/react/24/solid";
 import { useTrackList } from "@hooks/useTrackList";
+import { SkipForward } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -18,7 +18,7 @@ function SkipButton() {
       className={`inline-block w-12`}
       title={t("nextTrack")}
     >
-      <ForwardIcon className={`w-full`} />
+      <SkipForward className={`w-full`} />
     </button>
   );
 }

src/Components/MediaControls/StopButton.tsx

@@ -1,6 +1,6 @@
-import { StopIcon } from "@heroicons/react/24/solid";
 import { useAudio } from "@hooks/useAudio";
 import { useTrackList } from "@hooks/useTrackList";
+import { Square } from "lucide-react";
 import { SyntheticEvent, memo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -24,7 +24,7 @@ function StopButton() {
       title={t("stopTrack")}
       onClick={stop}
     >
-      <StopIcon className={`w-full`} />
+      <Square className={`w-full`} />
     </button>
   );
 }

src/Components/Nav.tsx

@@ -1,5 +1,5 @@
-import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import { Link } from "@tanstack/react-router";
+import { Menu, X } from "lucide-react";
 import { memo, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -52,7 +52,7 @@ function Nav() {
             className={`my-auto h-6 w-6`}
             aria-label={t("nav:show-menu")}
           >
-            <Bars3Icon />
+            <Menu />
           </button>
         </div>
 
@@ -75,7 +75,7 @@ function Nav() {
                 className={`h-6 w-6`}
                 aria-label={t("nav:close-menu")}
               >
-                <XMarkIcon />
+                <X />
               </button>
             </div>
 

src/Components/Nav/LoggedInAs.tsx

@@ -1,6 +1,6 @@
 import { useAuth } from "@/hooks/useAuth";
-import { UserIcon } from "@heroicons/react/24/solid";
 import { useNavigate } from "@tanstack/react-router";
+import { User2 } from "lucide-react";
 import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -21,7 +21,7 @@ function LoggedInAs() {
 
   return (
     <div className={`flex flex-row items-center gap-2 text-base`}>
-      <UserIcon className={`h-6 w-6`} />
+      <User2 className={`h-6 w-6`} />
       <div className={`flex flex-col text-center`}>
         <span title={server}>{username}</span>
       </div>

src/Components/SearchBar.tsx

@@ -1,5 +1,5 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 import { getRouteApi, useNavigate } from "@tanstack/react-router";
+import { Search } from "lucide-react";
 import { SyntheticEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -53,7 +53,7 @@ function SearchBar({ onSubmit }: Readonly<SearchBarProps>) {
           onChange={(event) => setFilter(event.target.value)}
         />
         <button className={"px-3 py-2"} aria-label={t("search")}>
-          <MagnifyingGlassIcon className={"h-6"} />
+          <Search className={"h-6"} />
         </button>
       </div>
     </form>

src/Components/Settings/ShowSettings.tsx

@@ -1,6 +1,6 @@
-import { Cog6ToothIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useSetting } from "@hooks/useSettings.js";
 import classNames from "classnames";
+import { Settings, X } from "lucide-react";
 import { SyntheticEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ReactModal from "react-modal";
@@ -30,7 +30,7 @@ function ShowSettings({ onClick }: Readonly<ShowSettingsProps>) {
         title={t("nav:show-settings")}
         onClick={openModal}
       >
-        <Cog6ToothIcon className={`h-6`} />
+        <Settings className={`h-6`} />
       </button>
 
       <ReactModal
@@ -65,11 +65,8 @@ function ShowSettings({ onClick }: Readonly<ShowSettingsProps>) {
           )}
         >
           <h1 className={`text-xl`}>{t("settings:modal-title")}</h1>
-          <button onClick={closeModal}>
-            <XMarkIcon
-              title={t("settings:close-modal")}
-              className={classNames(`h-5`)}
-            />
+          <button onClick={closeModal} title={t("settings:close-modal")}>
+            <X className={classNames(`h-5`)} />
           </button>
         </header>
 

src/Components/TrackListItem.tsx

@@ -1,7 +1,7 @@
 import type { Song } from "@api/types.js";
-import { PlayIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { useAlbumTracks } from "@hooks/useAlbumTracks.js";
 import { useTrackList } from "@hooks/useTrackList.js";
+import { Play, Plus } from "lucide-react";
 import { SyntheticEvent, memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -49,7 +49,7 @@ function TrackListItem({
         data-tooltip-content={t("playTrack")}
         data-tooltip-delay-show={1000}
       >
-        <PlayIcon className={`w-6 md:w-full`} />
+        <Play className={`w-6 md:w-full`} />
       </a>
     </button>
   );
@@ -66,7 +66,7 @@ function TrackListItem({
           data-tooltip-content={t("addTrack")}
           data-tooltip-delay-show={1000}
         >
-          <PlusIcon className={`w-6 md:w-full`} />
+          <Plus className={`w-6 md:w-full`} />
         </a>
       </button>
     ),
@@ -80,7 +80,7 @@ function TrackListItem({
         data-tooltip-content={t("currentlyPlaying")}
         data-tooltip-delay-show={1000}
       >
-        <PlayIcon className={`w-6 text-green-400 md:w-full`} />
+        <Play className={`w-6 text-green-400 md:w-full`} />
       </a>
     </div>
   );

src/Components/Updater/Update.tsx

@@ -1,5 +1,5 @@
-import { CloudArrowUpIcon } from "@heroicons/react/24/solid";
 import { useUpdateAvailable } from "@hooks/useUpdateAvailable.js";
+import { CloudUpload } from "lucide-react";
 import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -20,7 +20,7 @@ function Update() {
           data-tooltip-content={t("update-available")}
           data-tooltip-delay-show={1000}
         >
-          <CloudArrowUpIcon className={`h-6`} />
+          <CloudUpload className={`h-6`} />
         </a>
       </button>
     );