chore: center

src/components/layout/layout-item.tsx

@@ -14,7 +14,7 @@ interface Props {
   icon: React.ReactNode;
 }
 export const LayoutItem = (props: Props) => {
-  const { to, children, icon: Icon } = props;
+  const { to, children, icon } = props;
 
   const resolved = useResolvedPath(to);
   const match = useMatch({ path: resolved.pathname, end: true });
@@ -53,10 +53,8 @@ export const LayoutItem = (props: Props) => {
         ]}
         onClick={() => navigate(to)}
       >
-        <ListItemIcon sx={{ marginRight: -0.5 }}>
-          <Icon />
-        </ListItemIcon>
-        <ListItemText primary={children} />
+        <ListItemIcon sx={{ marginRight: -0.5 }}>{icon}</ListItemIcon>
+        <ListItemText sx={{ textAlign: "center" }} primary={children} />
       </ListItemButton>
     </ListItem>
   );

src/pages/_routers.tsx

@@ -18,43 +18,43 @@ export const routers = [
   {
     label: "Label-Proxies",
     link: "/",
-    icon: ProxiesSvg,
+    icon: <ProxiesSvg />,
     ele: ProxiesPage,
   },
   {
     label: "Label-Profiles",
     link: "/profile",
-    icon: ProfilesSvg,
+    icon: <ProfilesSvg />,
     ele: ProfilesPage,
   },
   {
     label: "Label-Connections",
     link: "/connections",
-    icon: ConnectionsSvg,
+    icon: <ConnectionsSvg />,
     ele: ConnectionsPage,
   },
   {
     label: "Label-Rules",
     link: "/rules",
-    icon: RulesSvg,
+    icon: <RulesSvg />,
     ele: RulesPage,
   },
   {
     label: "Label-Logs",
     link: "/logs",
-    icon: LogsSvg,
+    icon: <LogsSvg />,
     ele: LogsPage,
   },
   {
     label: "Label-Test",
     link: "/test",
-    icon: TestSvg,
+    icon: <TestSvg />,
     ele: TestPage,
   },
   {
     label: "Label-Settings",
     link: "/settings",
-    icon: SettingsSvg,
+    icon: <SettingsSvg />,
     ele: SettingsPage,
   },
 ];