refactor(UI): Usage of @preact-icons/tb for icons due to $tabler_icons deprecation (#938)

Fixes #931

---------

Co-authored-by: Augustin Mauroy <[email protected]>

Author: EGAMAGZ

frontend/components/GitHubRepoInput.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { Signal } from "@preact/signals";
 import { useRef } from "preact/hooks";
-import { GitHub } from "./icons/GitHub.tsx";
+import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
 
 export interface GithubRepoInputProps {
   id: string;
@@ -48,7 +48,7 @@ export function GitHubRepoInput(
   return (
     <div class="flex items-center w-full md:w-88 rounded-md text-jsr-gray-900 shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-white input-container">
       <span class="block">
-        <GitHub class="!size-5" />
+        <TbBrandGithub class="!size-5" />
       </span>
       <input
         id={id}

frontend/components/Header.tsx

@@ -3,7 +3,7 @@
 import { FullUser } from "../utils/api_types.ts";
 import { GlobalSearch } from "../islands/GlobalSearch.tsx";
 import { UserMenu } from "../islands/UserMenu.tsx";
-import { GitHub } from "./icons/GitHub.tsx";
+import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
 import { SearchKind } from "../util.ts";
 import { HeaderLogo } from "../islands/HeaderLogo.tsx";
 
@@ -107,7 +107,7 @@ export function Header({
               ? <UserMenu user={user} sudo={sudo} logoutUrl={logoutUrl} />
               : (
                 <a href={loginUrl} class="link-header flex items-center gap-2">
-                  <GitHub class="size-5 flex-none" aria-hidden={true} />
+                  <TbBrandGithub class="size-5 flex-none" aria-hidden={true} />
                   Sign in
                 </a>
               )}

frontend/components/HomepageHero.tsx

@@ -3,7 +3,7 @@ import { asset } from "fresh/runtime";
 import { GlobalSearch } from "../islands/GlobalSearch.tsx";
 import { HomepageHeroParticles } from "../islands/HomepageHeroParticles.tsx";
 import { AnimatedLogo } from "./AnimatedLogo.tsx";
-import { Plus } from "./icons/Plus.tsx";
+import TbPlus from "@preact-icons/tb/TbPlus";
 
 const canvasStyle = /*css*/ `.particles-js-canvas-el {
 	position: absolute;
@@ -79,7 +79,7 @@ export function HomepageHero(
             class="button-primary relative z-10 pointer-events-auto"
             href="/new"
           >
-            <Plus /> Publish a package
+            <TbPlus class="size-5" /> Publish a package
           </a>
         </div>
       </div>

frontend/components/List.tsx

@@ -1,6 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { PaginationData } from "../util.ts";
-import { ChevronRight } from "./icons/ChevronRight.tsx";
+import TbChevronRight from "@preact-icons/tb/TbChevronRight";
 import { ComponentChildren } from "preact";
 
 export interface ListDisplayItem {
@@ -38,7 +38,7 @@ export function ListDisplay(
             >
               {item.content}
 
-              <ChevronRight class="text-jsr-cyan-800 flex-shrink-0" />
+              <TbChevronRight class="text-jsr-cyan-800 flex-shrink-0 size-6" />
             </a>
           </li>
         ))}

frontend/components/Table.tsx

@@ -1,8 +1,7 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 
 import { ComponentChild, ComponentChildren } from "preact";
-import { ChevronLeft } from "./icons/ChevronLeft.tsx";
-import { ChevronRight } from "./icons/ChevronRight.tsx";
+import { TbChevronLeft, TbChevronRight } from "@preact-icons/tb";
 import { PaginationData } from "../util.ts";
 
 interface TableProps {
@@ -85,7 +84,7 @@ function Pagination(
           class="hover:text-black hover:bg-jsr-cyan-100 p-1 -m-1 rounded-full"
           title="Previous page"
         >
-          <ChevronLeft />
+          <TbChevronLeft class="size-5" />
         </a>
       )}
       <div class="text-sm text-jsr-gray-600">
@@ -103,7 +102,7 @@ function Pagination(
           class="hover:text-black hover:bg-jsr-gray-100 p-1 -m-1 rounded-full"
           title="Next page"
         >
-          <ChevronRight />
+          <TbChevronRight class="size-5" />
         </a>
       )}
     </div>