Personal roadmap list and empty friends

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -14,11 +14,11 @@ import {
   type AllowedRoadmapVisibility,
   type RoadmapDocument,
 } from './CreateRoadmap/CreateRoadmapModal';
-import RoadmapIcon from '../../icons/roadmap.svg';
 import { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown';
 import type { GetRoadmapListResponse } from './RoadmapListPage';
 import { useState, type Dispatch, type SetStateAction } from 'react';
 import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
+import {RoadmapIcon} from "../ReactIcons/RoadmapIcon.tsx";
 
 type PersonalRoadmapListType = {
   roadmaps: GetRoadmapListResponse['personalRoadmaps'];
@@ -91,11 +91,8 @@ export function PersonalRoadmapList(props: PersonalRoadmapListType) {
   if (roadmapList.length === 0) {
     return (
       <div className="flex flex-col items-center p-4 py-20">
-        <img
-          alt="roadmap"
-          src={RoadmapIcon.src}
-          className="mb-4 h-24 w-24 opacity-10"
-        />
+        <RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
+
         <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
         <p className="text-base text-gray-500">
           Create a roadmap to get started

src/components/Friends/EmptyFriends.tsx

@@ -1,6 +1,5 @@
-import UserPlusIcon from '../../icons/user-plus.svg';
-import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
+import { CopyIcon, UserPlus2 } from 'lucide-react';
 
 type EmptyFriendsProps = {
   befriendUrl: string;
@@ -13,14 +12,12 @@ export function EmptyFriends(props: EmptyFriendsProps) {
   return (
     <div className="rounded-md">
       <div className="mx-auto flex flex-col items-center p-7 text-center">
-        <img
-          alt="no friends"
-          src={UserPlusIcon.src}
-          className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
-        />
+        <UserPlus2 className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" />
+
         <h2 className="text-lg font-bold sm:text-xl">Invite your Friends</h2>
         <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
-          Share the unique link below with your friends to track their skills and progress.
+          Share the unique link below with your friends to track their skills
+          and progress.
         </p>
 
         <div className="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
@@ -44,7 +41,8 @@ export function EmptyFriends(props: EmptyFriendsProps) {
               copyText(befriendUrl);
             }}
           >
-            <img src={CopyIcon.src} className="h-4 w-4" alt="Invite Friends" />
+            <CopyIcon className="mr-1 h-4 w-4" />
+
             {isCopied ? 'Copied' : 'Copy'}
           </button>
         </div>