From ad46efcdd9f1a376cbba22d33e9e99a8657baeda Mon Sep 17 00:00:00 2001
From: kanta1207 <kan0712livepool@gmail.com>
Date: Fri, 17 Nov 2023 15:21:00 -0800
Subject: [PATCH] fix : replace icons with the ones in wireframe

---
 .../ui/icons/links/FoodsIconLink.tsx          | 20 +++++++++++++++++--
 .../ui/icons/links/GroupsIconLink.tsx         | 14 +++++++++++--
 .../ui/icons/links/ProfileIconLink.tsx        | 14 +++++++++++--
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/icons/links/FoodsIconLink.tsx b/src/components/ui/icons/links/FoodsIconLink.tsx
index ebf2cd4a..3263bcfe 100644
--- a/src/components/ui/icons/links/FoodsIconLink.tsx
+++ b/src/components/ui/icons/links/FoodsIconLink.tsx
@@ -1,7 +1,6 @@
 import { mainRouteConfig, MainRouteName } from '@/const/site/mainRouteConfig';
 import { cn } from '@/lib/tailwind/utils';
 
-import { Apple } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 
@@ -19,7 +18,24 @@ const FoodsIconLink: React.FC<Props> = ({ isSelected, className }) => {
       href={mainRouteConfig[name]}
       className="inline-flex flex-col items-center justify-center px-5"
     >
-      <Apple className={cn(isSelected ? 'stroke-primary' : 'stroke-secondary', className)} />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 48 48"
+        className={cn(isSelected ? 'stroke-primary' : 'stroke-secondary', className)}
+      >
+        <g fill="none" stroke-width="4">
+          <path
+            d="M24 41.02c2.431 0 3.431 1.31 4.734 1.601c1.303.292 2.397.372 3.517-.121c2.219-.978 3.571-2.142 5.212-3.881C40.505 35.395 42 30.964 42 25.029s-1.6-9.003-4.067-11.009c-2.466-2.006-3.896-2.39-6.878-2.006c-2.982.384-4.606 3.588-7.047 3.588c-2.44 0-5.415-3.159-8.002-3.588c-2.588-.43-4.006 0-6.246 2.006S6 19.15 6 25.03c0 5.878 1.552 10.236 4.593 13.46c1.64 1.739 2.937 3.033 5.155 4.01c1.12.494 2.279.414 3.536.122c1.258-.29 2.258-1.6 4.716-1.6Z"
+            clip-rule="evenodd"
+          />
+          <path
+            stroke-linecap="round"
+            d="M24.009 15.602C24.794 7.868 28.128 4 34.01 4c.54 1.628.68 3.203.418 4.726c-.123.724-.508 1.756-1.153 3.096M14.229 26c-.277 1.346-.277 2.731 0 4.157c.276 1.425.865 2.525 1.767 3.3"
+          />
+        </g>
+      </svg>
       <span className={cn('text-sm', isSelected ? 'text-primary' : 'text-secondary')}>{name}</span>
     </Link>
   );
diff --git a/src/components/ui/icons/links/GroupsIconLink.tsx b/src/components/ui/icons/links/GroupsIconLink.tsx
index dad92cc9..64b2c08c 100644
--- a/src/components/ui/icons/links/GroupsIconLink.tsx
+++ b/src/components/ui/icons/links/GroupsIconLink.tsx
@@ -1,7 +1,6 @@
 import { mainRouteConfig, MainRouteName } from '@/const/site/mainRouteConfig';
 import { cn } from '@/lib/tailwind/utils';
 
-import { Home } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 
@@ -19,7 +18,18 @@ const GroupsIconLink: React.FC<Props> = ({ isSelected, className }) => {
       href={mainRouteConfig[name]}
       className="inline-flex flex-col items-center justify-center px-5"
     >
-      <Home className={cn(isSelected ? 'stroke-primary' : 'stroke-secondary', className)} />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        className={cn(isSelected ? 'stroke-primary' : 'stroke-secondary', className)}
+      >
+        <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+          <path d="M6.133 21C4.955 21 4 20.02 4 18.81v-8.802c0-.665.295-1.295.8-1.71l5.867-4.818a2.09 2.09 0 0 1 2.666 0l5.866 4.818c.506.415.801 1.045.801 1.71v8.802c0 1.21-.955 2.19-2.133 2.19H6.133Z" />
+          <path d="M9 16c.85.63 1.885 1 3 1s2.15-.37 3-1m-5.5-4.5V11m5 .5V11" />
+        </g>
+      </svg>
       <span className={cn('text-sm', isSelected ? 'text-primary' : 'text-secondary')}>{name}</span>
     </Link>
   );
diff --git a/src/components/ui/icons/links/ProfileIconLink.tsx b/src/components/ui/icons/links/ProfileIconLink.tsx
index 9a7ef072..85ad7b05 100644
--- a/src/components/ui/icons/links/ProfileIconLink.tsx
+++ b/src/components/ui/icons/links/ProfileIconLink.tsx
@@ -1,7 +1,6 @@
 import { mainRouteConfig, MainRouteName } from '@/const/site/mainRouteConfig';
 import { cn } from '@/lib/tailwind/utils';
 
-import { UserCircle } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 
@@ -19,7 +18,18 @@ const ProfileIconLink: React.FC<Props> = ({ isSelected, className }) => {
       href={mainRouteConfig[name]}
       className="inline-flex flex-col items-center justify-center px-5"
     >
-      <UserCircle className={cn(isSelected ? 'stroke-primary' : 'stroke-secondary', className)} />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 48 48"
+        className={cn(isSelected ? 'fill-primary' : 'fill-secondary', className)}
+      >
+        <g fill-rule="evenodd" clip-rule="evenodd">
+          <path d="M24 27a8 8 0 1 0 0-16a8 8 0 0 0 0 16Zm0-2a6 6 0 1 0 0-12a6 6 0 0 0 0 12Z" />
+          <path d="M44 24c0 11.046-8.954 20-20 20S4 35.046 4 24S12.954 4 24 4s20 8.954 20 20ZM33.63 39.21A17.915 17.915 0 0 1 24 42a17.916 17.916 0 0 1-9.832-2.92c-.24-.3-.483-.61-.73-.93A2.144 2.144 0 0 1 13 36.845c0-1.077.774-1.98 1.809-2.131c6.845-1 11.558-.914 18.412.035A2.077 2.077 0 0 1 35 36.818c0 .48-.165.946-.463 1.31c-.307.374-.61.735-.907 1.082Zm3.355-2.744c-.16-1.872-1.581-3.434-3.49-3.698c-7.016-.971-11.92-1.064-18.975-.033c-1.92.28-3.335 1.856-3.503 3.733A17.94 17.94 0 0 1 6 24c0-9.941 8.059-18 18-18s18 8.059 18 18a17.94 17.94 0 0 1-5.015 12.466Z" />
+        </g>
+      </svg>
       <span className={cn('text-sm', isSelected ? 'text-primary' : 'text-secondary')}>{name}</span>
     </Link>
   );