Merge pull request #345 from Game-as-a-Service/refactor/icon-component

refactor: remove unnecessary SVG files and consolidate SVG usage into…

components/lobby/CreateRoomModal/CreateRoomModal.tsx

@@ -1,16 +1,15 @@
 import { useState, useEffect, FormEvent, ChangeEvent } from "react";
+import { useRouter } from "next/router";
+import useRequest from "@/hooks/useRequest";
+import { createRoomEndpoint, CreateRoomFormType } from "@/requests/rooms";
+import { getAllGamesEndpoint, GameType } from "@/requests/games";
 import Button from "@/components/shared/Button";
 import Modalow from "@/components/shared/Modalow";
 import GameListModal from "./GameListModal";
 import Input from "@/components/shared/Input";
-import useRequest from "@/hooks/useRequest";
-import { useRouter } from "next/router";
-import { createRoomEndpoint, CreateRoomFormType } from "@/requests/rooms";
-import { getAllGamesEndpoint, GameType } from "@/requests/games";
-import styles from "./createRoomModall.module.css";
 import PasswordField from "@/components/shared/PasswordField";
 import Icon from "@/components/shared/Icon";
-import { target } from "@/components/shared/Icon/group/target";
+import styles from "./createRoomModall.module.css";
 
 const initialRoomFormState = {
   name: "",
@@ -132,7 +131,7 @@ export default function CreateRoomModal() {
                 />
               </div>
             </div>
-            <div className="flex items-center relative">
+            <div className="flex items-center relative ">
               <div className="w-full">
                 <Input
                   inputClassName="cursor-pointer"
@@ -148,12 +147,12 @@ export default function CreateRoomModal() {
               </div>
               <button
                 type="button"
-                className="w-[28.11px] h-[28.11px] ml-[9px] absolute top-0 right-[-8px] translate-x-[100%] "
+                className="ml-[9px] absolute top-1/2 right-[-8px] translate-x-[100%] translate-y-[-50%]"
                 onClick={() => setShowGameListModal(true)}
               >
                 <Icon
-                  className="stroke-[2.8116] stroke-[#1E1F22] hover:stroke-[#2F88FF]"
-                  icon={target}
+                  className="[&_*]:hover:stroke-[#2F88FF]"
+                  name="gamepadSimple"
                 />
               </button>
             </div>

components/rooms/RoomCard.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { Room } from "@/requests/rooms";
-import Lock from "../../public/images/padlock.svg";
-import Cover from "../shared/Cover";
+import Icon from "@/components/shared/Icon";
+import Cover from "@/components/shared/Cover";
 
 type RoomsCardProps = {
   key: string;
@@ -11,7 +11,7 @@ type RoomsCardProps = {
   onClick: (id: string) => void;
 };
 const RoomCard = ({ room, active, onClick }: RoomsCardProps) => {
-  const LockIcon = () => <Lock className="w-5 h-5" />;
+  const LockIcon = () => <Icon name="padlock" className="w-5 h-5" />;
 
   const roomCardClass = cn(
     "room__card",

components/shared/Carousel/CarouselArrowButton.tsx

@@ -20,6 +20,8 @@ export default function CarouselArrowButton({
     flex justify-center items-center text-white font-bold 
   `;
 
+  const svgClass = "[&_*]:stroke-white";
+
   const prevClass = "absolute left-0 top-0";
 
   const nextClass = "absolute right-0 top-0";
@@ -33,8 +35,8 @@ export default function CarouselArrowButton({
   );
 
   const arrowIcon = {
-    prev: <Icon name="arrowPrev" />,
-    next: <Icon name="arrowNext" />,
+    prev: <Icon name="navArrowLeft" className={svgClass} />,
+    next: <Icon name="navArrowRight" className={svgClass} />,
   };
 
   return (

components/shared/Header.tsx

@@ -2,11 +2,11 @@ import { useState } from "react";
 import { cn } from "@/lib/utils";
 import useAuth from "@/hooks/context/useAuth";
 import useUser from "@/hooks/useUser";
-import Cover from "@/components/shared/Cover";
-import IconProfile from "@/public/images/icon_profile.svg";
 import UserInfoModal from "../lobby/UserInfoModal";
 import Button from "./Button";
 import Badge from "./Badge";
+import Icon from "./Icon";
+import type { IconName } from "./Icon/icons";
 
 enum HeaderActions {
   HELP = "HELP",
@@ -22,7 +22,7 @@ export default function Header() {
 
   const buttons = [
     {
-      Icon: IconProfile,
+      Icon: "player" as IconName,
       type: HeaderActions.PROFILE,
       click: () => {
         setOpenProfile(true);
@@ -34,11 +34,7 @@ export default function Header() {
   return (
     <header className="flex flex-row items-center justify-between p-[10px_15px] bg-dark1E">
       <div className="flex items-center gap-3">
-        <Cover
-          src="/images/logo.svg"
-          alt="Water ball logo"
-          className="w-[39px] h-[39px] bg-transparent"
-        />
+        <Icon name="logo" className="bg-transparent" />
       </div>
       <div className="header___actions flex gap-6">
         {buttons.map((ButtonProps) => (
@@ -56,8 +52,11 @@ export default function Header() {
               className="relative bg-transparent hover:shadow-none p-0"
               onClick={ButtonProps.click}
             >
-              <ButtonProps.Icon
-                className={cn({ "fill-blue": ButtonProps.active })}
+              <Icon
+                name={ButtonProps.Icon}
+                className={cn("[&_*]:stroke-white", {
+                  "fill-blue": ButtonProps.active,
+                })}
               />
             </Button>
           </Badge>

components/shared/Icon/Icon.tsx

@@ -1,53 +1,29 @@
 import type { ClassValue } from "clsx";
 import { cn } from "@/lib/utils";
-import { IconVariants } from "./types/types";
 import icons, { IconName } from "./icons";
 
 type IconProps = {
+  name: IconName;
   className?: ClassValue;
-
-  /** If `true`, spin animation */
-  spin?: boolean;
-} & (
-  | {
-      icon: IconVariants;
-      name?: never;
-    }
-  | {
-      icon?: never;
-      name: IconName;
-    }
-);
+};
 
 /**
  * 新增 Svg 可以將檔案放至 `@/components/shared/Icon/icons/svgs` 裡，
  * 在 `@/components/shared/Icon/icons/index.ts` 引入 svg
  * 並放入 **icons** 這個物件，即可使用
  */
 const Icon = (props: IconProps) => {
-  const { className, icon, name, spin = false } = props;
-  const definition = icon?.definition;
-  const transformClassName = cn(className, { "animate-spin": spin });
+  const { className, name, ...rest } = props;
+  const transformClassName = cn(className);
   const SvgIcon = name && icons[name];
 
   return (
-    <>
-      {SvgIcon && (
-        <SvgIcon focusable={false} className={transformClassName} aria-hidden />
-      )}
-      {definition && (
-        <svg
-          {...definition.svg}
-          focusable={false}
-          className={transformClassName}
-          aria-hidden
-        >
-          {definition.path?.map((path, index) => (
-            <path key={index} {...path} />
-          ))}
-        </svg>
-      )}
-    </>
+    <SvgIcon
+      focusable={false}
+      className={transformClassName}
+      aria-hidden
+      {...rest}
+    />
   );
 };