chore: convert all icons to components

frontend/src/components/Navbar.tsx

@@ -2,13 +2,13 @@ import { Outlet, useLocation } from "react-router-dom";
 import { useInfo } from "../hooks/useInfo";
 import { useLogin } from "../hooks/useLogin";
 import nwcLogo from "../assets/images/nwc-logo.svg";
-import caretIcon from "../assets/icons/caret.svg";
-import aboutIcon from "../assets/icons/about.svg";
 import React from "react";
-import { LogoutIcon } from "./icons/LogoutIcon";
 import { handleFetchError, validateFetchResponse } from "../utils/fetch";
 import { useCSRF } from "../hooks/useCSRF";
 import { useUser } from "../hooks/useUser";
+import { LogoutIcon } from "./icons/LogoutIcon";
+import { AboutIcon } from "./icons/AboutIcon";
+import { CaretIcon } from "./icons/CaretIcon";
 
 function Navbar() {
   const { data: info } = useInfo();
@@ -115,12 +115,10 @@ function ProfileDropdown() {
         onClick={() => setOpen((current) => !current)}
       >
         <span className="mx-1">{user.email}</span>
-        <img
-          id="caret"
+        <CaretIcon
           className={`inline cursor-pointer w-4 ml-2 ${
             isOpen ? "rotate-180" : ""
           }`}
-          src={caretIcon}
         />
       </p>
 
@@ -133,11 +131,7 @@ function ProfileDropdown() {
             className="md:hidden flex items-center justify-left  py-2 text-gray-400 dark:text-gray-400"
             href="/about"
           >
-            <img
-              className="inline cursor-pointer w-4 mr-3"
-              src={aboutIcon}
-              alt="about-svg"
-            />
+            <AboutIcon className="inline cursor-pointer w-4 mr-3" />
             <p className="font-normal">About</p>
           </a>
 

frontend/src/components/icons/AboutIcon.tsx

@@ -0,0 +1,19 @@
+import { SVGAttributes } from "react";
+
+export function AboutIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="8.5" />
+      <path strokeLinecap="round" d="M12 10.5v7M12 8V7"></path>
+    </svg>
+  );
+}

frontend/src/components/icons/CaretIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+export function CaretIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M12.248 8.237a.25.25 0 00-.354 0L5.53 14.601a.75.75 0 11-1.06-1.06l6.363-6.364a1.75 1.75 0 012.475 0l6.364 6.364a.75.75 0 01-1.06 1.06l-6.364-6.364z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}