feat(frontend): improve icon

Author: AprilNEA

packages/frontend/src/assets/fido-passkey-mark-a.tsx

@@ -0,0 +1,43 @@
+import type { SVGProps } from "react";
+
+const FIDOPasskeyMarkA = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    style={{
+      background: "new 0 0 216 216",
+    }}
+    viewBox="0 0 216 216"
+    {...props}
+  >
+    <title>FIDO Passkey Mark A</title>
+    <style>{".st2{fill-rule:evenodd;clip-rule:evenodd}"}</style>
+    <g id="Isolation_Mode">
+      <path
+        d="M0 0h216v216H0z"
+        style={{
+          fill: "none",
+        }}
+      />
+      <path
+        d="M172.32 96.79c0 13.78-8.48 25.5-20.29 29.78l7.14 11.83-10.57 13 10.57 12.71-17.04 22.87-12.01-12.82V125.7c-10.68-4.85-18.15-15.97-18.15-28.91 0-17.4 13.51-31.51 30.18-31.51 16.66 0 30.17 14.11 30.17 31.51zm-30.18 4.82c4.02 0 7.28-3.4 7.28-7.6 0-4.2-3.26-7.61-7.28-7.61s-7.28 3.4-7.28 7.61c-.01 4.2 3.26 7.6 7.28 7.6z"
+        style={{
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          fill: "#353535",
+        }}
+      />
+      <path
+        d="M172.41 96.88c0 13.62-8.25 25.23-19.83 29.67l6.58 11.84-9.73 13 9.73 12.71-17.03 23.05v-85.54c4.02 0 7.28-3.41 7.28-7.6 0-4.2-3.26-7.61-7.28-7.61V65.28c16.73 0 30.28 14.15 30.28 31.6zM120.24 131.43c-9.75-8-16.3-20.3-17.2-34.27H50.8c-10.96 0-19.84 9.01-19.84 20.13v25.17c0 5.56 4.44 10.07 9.92 10.07h69.44c5.48 0 9.92-4.51 9.92-10.07v-11.03z"
+        className="st2"
+      />
+      <path
+        d="M73.16 91.13c-2.42-.46-4.82-.89-7.11-1.86-8.65-3.63-13.69-10.32-15.32-19.77-1.12-6.47-.59-12.87 2.03-18.92 3.72-8.6 10.39-13.26 19.15-14.84 5.24-.94 10.46-.73 15.5 1.15 7.59 2.82 12.68 8.26 15.03 16.24 2.38 8.05 2.03 16.1-1.56 23.72-3.72 7.96-10.21 12.23-18.42 13.9-.68.14-1.37.27-2.05.41-2.41-.03-4.83-.03-7.25-.03z"
+        style={{
+          fill: "#141313",
+        }}
+      />
+    </g>
+  </svg>
+);
+export default FIDOPasskeyMarkA;

packages/frontend/src/utilities/meta.ts

@@ -20,16 +20,19 @@ import {
   // FileCode2Icon,
   FileCodeIcon,
   FileIcon,
+  FileJson2Icon,
   FileJsonIcon,
   FileTextIcon,
   HashIcon,
+  Heading5Icon,
   KeyIcon,
   LinkIcon,
   RadarIcon,
   RotateCcwKeyIcon,
 } from "lucide-react";
 import { lazy } from "react";
 import type { RouteComponentProps } from "wouter";
+import FIDOPasskeyMarkA from "@/assets/fido-passkey-mark-a";
 import Fido2Page from "./cryptography/fido/fido2";
 import IpPage from "./network/ip";
 
@@ -85,13 +88,13 @@ const utilities: UtilityMeta[] = [
     items: [
       {
         key: "json",
-        icon: FileJsonIcon,
+        icon: FileJson2Icon,
         title: msg`JSON Format/Validate`,
         page: JsonFormatterPage,
       },
       {
         key: "html",
-        icon: FileCodeIcon,
+        icon: Heading5Icon,
         title: msg`HTML Beautify/Minify`,
         page: HtmlEncoderDecoderPage,
       },
@@ -147,16 +150,9 @@ const utilities: UtilityMeta[] = [
     items: [
       {
         key: "fido",
-        icon: KeyIcon,
+        icon: FIDOPasskeyMarkA,
         title: msg`FIDO Debugger`,
-        items: [
-          {
-            key: "fido2",
-            icon: KeyIcon,
-            title: msg`FIDO2 Authenticator`,
-            page: Fido2Page,
-          },
-        ],
+        page: Fido2Page,
       },
       {
         key: "oath",