feat: allow disable group icon

src/components/proxy/proxy-render.tsx

@@ -16,6 +16,7 @@ import { ProxyHead } from "./proxy-head";
 import { ProxyItem } from "./proxy-item";
 import { ProxyItemMini } from "./proxy-item-mini";
 import type { IRenderItem } from "./use-render-list";
+import { useVerge } from "@/hooks/use-verge";
 
 interface RenderProps {
   item: IRenderItem;
@@ -30,6 +31,8 @@ export const ProxyRender = (props: RenderProps) => {
   const { indent, item, onLocation, onCheckAll, onHeadState, onChangeProxy } =
     props;
   const { type, group, headState, proxy, proxyCol } = item;
+  const { verge } = useVerge();
+  const enable_group_icon = verge?.enable_group_icon ?? true;
 
   if (type === 0 && !group.hidden) {
     return (
@@ -37,18 +40,32 @@ export const ProxyRender = (props: RenderProps) => {
         dense
         onClick={() => onHeadState(group.name, { open: !headState?.open })}
       >
-        {group.icon && group.icon.trim().startsWith("http") && (
-          <img src={group.icon} height="40px" style={{ marginRight: "8px" }} />
-        )}
-        {group.icon && group.icon.trim().startsWith("data") && (
-          <img src={group.icon} height="40px" style={{ marginRight: "8px" }} />
-        )}
-        {group.icon && group.icon.trim().startsWith("<svg") && (
-          <img
-            src={`data:image/svg+xml;base64,${btoa(group.icon)}`}
-            height="40px"
-          />
-        )}
+        {enable_group_icon &&
+          group.icon &&
+          group.icon.trim().startsWith("http") && (
+            <img
+              src={group.icon}
+              height="40px"
+              style={{ marginRight: "8px" }}
+            />
+          )}
+        {enable_group_icon &&
+          group.icon &&
+          group.icon.trim().startsWith("data") && (
+            <img
+              src={group.icon}
+              height="40px"
+              style={{ marginRight: "8px" }}
+            />
+          )}
+        {enable_group_icon &&
+          group.icon &&
+          group.icon.trim().startsWith("<svg") && (
+            <img
+              src={`data:image/svg+xml;base64,${btoa(group.icon)}`}
+              height="40px"
+            />
+          )}
         <ListItemText
           primary={group.name}
           secondary={

src/components/setting/mods/layout-viewer.tsx

@@ -84,6 +84,19 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           </GuardState>
         </SettingItem>
 
+        <SettingItem label={t("Proxy Group Icon")}>
+          <GuardState
+            value={verge?.enable_group_icon ?? true}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ enable_group_icon: e })}
+            onGuard={(e) => patchVerge({ enable_group_icon: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+
         <SettingItem label={t("Common Tray Icon")}>
           <GuardState
             value={verge?.common_tray_icon}