shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 13:23:44 +08:00
Code Packages Projects Releases Activity

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

Browse Source
This commit is contained in:
Charles 2024-03-09 23:13:08 +08:00 committed by GitHub
parent 025c8856ed
commit eb6fa5f1f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/layout/layout-item.tsx
View File

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

2
src/pages/_layout.tsx
View File

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

29
src/pages/_routers.tsx
View File

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