refactor: use Iconoir library instead of svg files

package.json

@@ -20,7 +20,7 @@
     "framer-motion": "^11.5.6",
     "i18next": "^23.7.16",
     "i18next-browser-languagedetector": "^7.2.0",
-    "iconoir-react": "^7.10.1",
+    "iconoir-react": "^7.11.0",
     "lottie-react": "^2.4.0",
     "notion-client": "^6.16.0",
     "openid-client": "^6.5.0",

src/components/navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { generateLoginURLHandler, generateOAuthLoginURL } from "@/apis/auth";
-import AccountIcon from "@/assets/icons/account.svg?react";
+import { ProfileCircle } from 'iconoir-react';
 import GroupsCompactLogoDark from "@/assets/logos/groups-compact-dark.svg?react";
 import GroupsCompactLogo from "@/assets/logos/groups-compact.svg?react";
 import GroupsLogoDark from "@/assets/logos/groups-dark.svg?react";
@@ -61,7 +61,7 @@ const Navbar = () => {
           onClick={() => generateLoginURLHandler(location.pathname)}
           className="hidden items-center justify-center gap-2 md:flex"
         >
-          <AccountIcon className="flex h-6" />
+          <ProfileCircle color="rgb(235, 85, 40)" className="flex h-6" />
           <div className="whitespace-nowrap align-middle font-medium text-primary">
             {userInfo?.name ?? t("navbar.login")}
           </div>

src/components/pagination/Pagination.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect } from "react";
 
-import ArrowRightIcon from "@/assets/icons/arrow-right.svg?react";
+import { NavArrowRight } from 'iconoir-react';
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import Button from "../button/Button";
 
@@ -52,23 +52,23 @@ const Pagination = ({ items, itemsPerPage, page }: PaginationProps) => {
         {page !== 0 ? (
           <Button animated>
             <Link to={generateLink(page - 1)}>
-              <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-text dark:stroke-d_white md:w-7" />
+              <NavArrowRight className="w-6 rotate-180 fill-none stroke-text dark:stroke-d_white md:w-7" />
             </Link>
           </Button>
         ) : (
           <Button disabled>
-            <ArrowRightIcon className="w-6 rotate-180 fill-none stroke-grey dark:stroke-d_grey md:w-7" />
+            <NavArrowRight className="w-6 rotate-180 fill-none stroke-grey dark:stroke-d_grey md:w-7" />
           </Button>
         )}
         {page + 1 !== pages ? (
           <Button animated>
             <Link to={generateLink(page + 1)}>
-              <ArrowRightIcon className="w-6 fill-none stroke-text dark:stroke-d_white md:w-7" />
+              <NavArrowRight className="w-6 fill-none stroke-text dark:stroke-d_white md:w-7" />
             </Link>
           </Button>
         ) : (
           <Button disabled>
-            <ArrowRightIcon className="w-6 stroke-grey dark:stroke-d_grey md:w-7" />
+            <NavArrowRight className="w-6 stroke-grey dark:stroke-d_grey md:w-7" />
           </Button>
         )}
       </div>

src/components/select/Select.tsx

@@ -1,4 +1,4 @@
-import ArrowRight from "@/assets/icons/arrow-right.svg?react";
+import { NavArrowRight } from 'iconoir-react';
 import Check from "@/assets/icons/check.svg?react";
 import useClickOutside from "@/hooks/useClickOutside";
 import { cn } from "@/utils/clsx";
@@ -97,7 +97,7 @@ const Select = <OptionType extends SelectOptionBase>({
       >
         {selectedValue.value}
       </div>
-      <ArrowRight className={cn(IconVariants({ size }), "rotate-90")} />
+      <NavArrowRight className={cn(IconVariants({ size }), "rotate-90")} />
 
       {isOpen && (
         <ul

src/pages/createGroup/components/MemberCard.tsx

@@ -1,4 +1,4 @@
-import Close from '@/assets/icons/close.svg';
+import { Xmark } from 'iconoir-react';
 
 interface MemberCardProps {
   name: string;
@@ -29,7 +29,7 @@ const MemberCard = ({
         </div>
       </div>
 
-      <Close onClick={onCloseClick} className="w-6" />
+      <Xmark color="rgb(110, 110, 115)" onClick={onCloseClick} className="w-6" />
     </li>
   );
 };

src/pages/detail/tabs/members/GroupMembersTab.tsx

@@ -3,7 +3,7 @@ import useSWR from "swr";
 import { getGroupMembers } from "@/apis/group";
 import { useOutletContext, useParams } from "react-router-dom";
 
-import UserCircle from "@/assets/icons/user-circle.svg?react";
+import { UserCircle } from 'iconoir-react';
 
 import { useTranslation } from "react-i18next";
 import { GroupDetailContext } from "../../DetailPageLayout";
@@ -31,7 +31,7 @@ const GroupMembersTab = () => {
   return (
     <div className="flex flex-col items-center">
       <div className="flex gap-1.5 mt-6">
-        <UserCircle />
+        <UserCircle color="rgb(110, 110, 115)" />
         <div className={"text-[18px] text-greyDark"}>
           {t("group.memberCount", { count: group.memberCount })}
         </div>

src/pages/main/GroupItem.tsx

@@ -1,8 +1,6 @@
 import { GroupInfoWithPresidentUuid } from "src/types/interfaces";
 
-import ArrowRight from "@/assets/icons/arrow-right.svg?react";
-import Crown from "@/assets/icons/crown.svg?react";
-import Settings from "@/assets/icons/settings.svg?react";
+import { NavArrowRight, Settings, Crown } from 'iconoir-react';
 import GroupProfileDefault from "@/assets/icons/group-profile-default.webp";
 import Card from "@/components/card/Card";
 import { Link } from "react-router-dom";
@@ -42,18 +40,18 @@ const GroupItem = ({
         </p>
 
         {isAdmin && (
-          <Crown className="ml-1 inline stroke-dark dark:stroke-d_white" />
+          <Crown color="rgb(235, 85, 40)" className="ml-1 inline stroke-dark dark:stroke-d_white" />
         )}
 
         <div className="flex-grow" />
 
         {isAdmin && (
           <Link to={`/manage/${group.uuid}/groupinfo`}>
-            <Settings className="fill-greyDark mr-2" />
+            <Settings color="rgb(110, 110, 115)" className="fill-greyDark mr-2" />
           </Link>
         )}
 
-        <ArrowRight className="h-[30px] stroke-dark dark:stroke-d_white" />
+        <NavArrowRight className="h-[30px] stroke-dark dark:stroke-d_white" />
       </a>
     </Card>
   );

src/pages/manage/ManageLayout.tsx

@@ -1,4 +1,4 @@
-import ArrowRight from "@/assets/icons/arrow-right.svg?react";
+import { NavArrowRight } from 'iconoir-react';
 import { Outlet, useParams, useNavigate } from "react-router-dom";
 import { getGroup, getUserRole } from "@/apis/group";
 import {
@@ -62,7 +62,7 @@ const ManageLayout = () => {
           <div className="flex flex-col items-start gap-2.5 self-stretch">
             <div onClick={handleGoBack} className="cursor-pointer">
               <div className="flex items-center">
-                <ArrowRight className="h-5 w-5 md:h-6 md:w-6 stroke-primary scale-x-[-1]" />
+                <NavArrowRight className="h-5 w-5 md:h-6 md:w-6 stroke-primary scale-x-[-1]" />
                 <p className="text-primary text-base md:text-xl font-medium">
                   {t("manageGroup.goBack")}
                 </p>

src/pages/manage/pages/members/sections/memberManagement/MemberTableRow.tsx

@@ -63,7 +63,7 @@ const MemberTableRow = ({
       {/* 이름 */}
       <th className={cn(cellStyle, "text-greyDark")}>
         <div className="flex items-center gap-2">
-          {member.name} {isThisMemberPresident && <Crown />}
+          {member.name} {isThisMemberPresident && <Crown color="rgb(235, 85, 40)" />}
         </div>
       </th>
       {/* 이메일 */}

yarn.lock

@@ -6225,12 +6225,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconoir-react@npm:^7.10.1":
-  version: 7.10.1
-  resolution: "iconoir-react@npm:7.10.1"
+"iconoir-react@npm:^7.11.0":
+  version: 7.11.0
+  resolution: "iconoir-react@npm:7.11.0"
   peerDependencies:
-    react: ^16.8.6 || ^17 || ^18
-  checksum: 10389400a67c55e9ab86ef3d1a753d043e3091a017c22a2fecf9663c0648a865c604a490620668a2699f3f5fb13e57759caf652f3ded250c3d27bdd934942a52
+    react: 18 || 19
+  checksum: ac0607a33da9050f01a2621d9e2f02b5c72bdc6d297eeec2d9872579ba00ad7e5a215c26a9b5dcf881f1f97a7481fb85ba040528ebc058f1f6d24ed25f4f111b
   languageName: node
   linkType: hard
 
@@ -9373,7 +9373,7 @@ __metadata:
     framer-motion: ^11.5.6
     i18next: ^23.7.16
     i18next-browser-languagedetector: ^7.2.0
-    iconoir-react: ^7.10.1
+    iconoir-react: ^7.11.0
     lottie-react: ^2.4.0
     notion-client: ^6.16.0
     openid-client: ^6.5.0