tweak(ui): menu icon use svg component (#524)

src/components/layout/layout-item.tsx

@@ -3,7 +3,7 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
-  ListItemAvatar,
+  ListItemIcon,
   Avatar,
 } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
@@ -11,10 +11,10 @@ import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
 interface Props {
   to: string;
   children: string;
-  img: string;
+  icon: React.ReactNode;
 }
 export const LayoutItem = (props: Props) => {
-  const { to, children, img } = props;
+  const { to, children, icon: Icon } = props;
 
   const resolved = useResolvedPath(to);
   const match = useMatch({ path: resolved.pathname, end: true });
@@ -53,9 +53,9 @@ export const LayoutItem = (props: Props) => {
         ]}
         onClick={() => navigate(to)}
       >
-        <ListItemAvatar sx={{ marginRight: -0.5 }}>
-          <Avatar src={img}></Avatar>
-        </ListItemAvatar>
+        <ListItemIcon sx={{ marginRight: -0.5 }}>
+          <Icon />
+        </ListItemIcon>
         <ListItemText primary={children} />
       </ListItemButton>
     </ListItem>

src/pages/_layout.tsx

@@ -139,7 +139,7 @@ const Layout = () => {
                 <LayoutItem
                   key={router.label}
                   to={router.link}
-                  img={router.img}
+                  icon={router.icon}
                 >
                   {t(router.label)}
                 </LayoutItem>

src/pages/_routers.tsx

@@ -5,55 +5,56 @@ import ProfilesPage from "./profiles";
 import SettingsPage from "./settings";
 import ConnectionsPage from "./connections";
 import RulesPage from "./rules";
-import ProxiesSVG from "@/assets/image/itemicon/proxies.svg";
-import ProfilesSVG from "@/assets/image/itemicon/profiles.svg";
-import ConnectionsSVG from "@/assets/image/itemicon/connections.svg";
-import RulesSVG from "@/assets/image/itemicon/rules.svg";
-import LogsSVG from "@/assets/image/itemicon/logs.svg";
-import TestSVG from "@/assets/image/itemicon/test.svg";
-import SettingsSVG from "@/assets/image/itemicon/settings.svg";
+
+import ProxiesSvg from "@/assets/image/itemicon/proxies.svg?react";
+import ProfilesSvg from "@/assets/image/itemicon/profiles.svg?react";
+import ConnectionsSvg from "@/assets/image/itemicon/connections.svg?react";
+import RulesSvg from "@/assets/image/itemicon/rules.svg?react";
+import LogsSvg from "@/assets/image/itemicon/logs.svg?react";
+import TestSvg from "@/assets/image/itemicon/test.svg?react";
+import SettingsSvg from "@/assets/image/itemicon/settings.svg?react";
 
 export const routers = [
   {
     label: "Label-Proxies",
     link: "/",
-    img: ProxiesSVG,
+    icon: ProxiesSvg,
     ele: ProxiesPage,
   },
   {
     label: "Label-Profiles",
     link: "/profile",
-    img: ProfilesSVG,
+    icon: ProfilesSvg,
     ele: ProfilesPage,
   },
   {
     label: "Label-Connections",
     link: "/connections",
-    img: ConnectionsSVG,
+    icon: ConnectionsSvg,
     ele: ConnectionsPage,
   },
   {
     label: "Label-Rules",
     link: "/rules",
-    img: RulesSVG,
+    icon: RulesSvg,
     ele: RulesPage,
   },
   {
     label: "Label-Logs",
     link: "/logs",
-    img: LogsSVG,
+    icon: LogsSvg,
     ele: LogsPage,
   },
   {
     label: "Label-Test",
     link: "/test",
-    img: TestSVG,
+    icon: TestSvg,
     ele: TestPage,
   },
   {
     label: "Label-Settings",
     link: "/settings",
-    img: SettingsSVG,
+    icon: SettingsSvg,
     ele: SettingsPage,
   },
 ];