MemberCount: use circle svg instead of css hacks (#3653)

fixes some deformations

src/plugins/memberCount/CircleIcon.tsx

@@ -0,0 +1,17 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export function CircleIcon({ className }: { className?: string; }) {
+    return (
+        <svg viewBox="0 0 24 24" className={className}>
+            <circle
+                cx="12"
+                cy="12"
+                r="8"
+            />
+        </svg>
+    );
+}

src/plugins/memberCount/MemberCount.tsx

@@ -9,6 +9,7 @@ import { isObjectEmpty } from "@utils/misc";
 import { ChannelStore, PermissionsBits, PermissionStore, SelectedChannelStore, Tooltip, useEffect, useStateFromStores, VoiceStateStore } from "@webpack/common";
 
 import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat, settings, ThreadMemberListStore } from ".";
+import { CircleIcon } from "./CircleIcon";
 import { OnlineMemberCountStore } from "./OnlineMemberCountStore";
 import { VoiceIcon } from "./VoiceIcon";
 
@@ -80,7 +81,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
             <Tooltip text={`${formattedOnlineCount} online in this channel`} position="bottom">
                 {props => (
                     <div {...props} className={cl("container")}>
-                        <span className={cl("online-dot")} />
+                        <CircleIcon className={cl("online-count")} />
                         <span className={cl("online")}>{formattedOnlineCount}</span>
                     </div>
                 )}
@@ -88,7 +89,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
             <Tooltip text={`${numberFormat(totalCount)} total server members`} position="bottom">
                 {props => (
                     <div {...props} className={cl("container")}>
-                        <span className={cl("total-dot")} />
+                        <CircleIcon className={cl("total-count")} />
                         <span className={cl("total")}>{numberFormat(totalCount)}</span>
                     </div>
                 )}

src/plugins/memberCount/index.tsx

@@ -36,7 +36,6 @@ export const ThreadMemberListStore = findStoreLazy("ThreadMemberListStore") as F
     getMemberListSections(channelId?: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; };
 };
 
-
 export const settings = definePluginSettings({
     toolTip: {
         type: OptionType.BOOLEAN,

src/plugins/memberCount/style.css

@@ -18,6 +18,7 @@
     flex-wrap: wrap;
     margin-top: 1em;
     padding-inline: 1em;
+    line-height: 1.2em;
 }
 
 .vc-membercount-container {
@@ -38,20 +39,18 @@
     color: var(--color-voice);
 }
 
-.vc-membercount-online-dot {
-    background-color: var(--color-online);
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
+.vc-membercount-online-count {
+    fill: var(--status-online);
+    width: 18px;
+    height: 18px;
 }
 
-.vc-membercount-total-dot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    border: 3px solid var(--color-total);
+.vc-membercount-total-count {
+    fill: none;
+    stroke: var(--status-offline);
+    stroke-width: 4px;
+    width: 15px;
+    height: 15px;
 }
 
 .vc-membercount-voice-icon {