Add SVG masks to server / user icons.

src/components/common/user/UserIcon.tsx

@@ -62,7 +62,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
             height={size}
             aria-hidden="true"
             viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32">
+            <foreignObject x="0" y="0" width="32" height="32" mask={props.status ? "url(#user)" : undefined}>
                 {
                     <img src={iconURL}
                         draggable={false} />

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,12 +1,13 @@
+import Tooltip from "../../common/Tooltip";
 import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
 import styled, { css } from "styled-components";
 import ServerIcon from "../../common/ServerIcon";
 import { Children } from "../../../types/Preact";
-import { Plus } from "@styled-icons/boxicons-regular";
+import UserIcon from "../../common/user/UserIcon";
 import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu, openContextMenu } from 'preact-context-menu';
+import { Plus } from "@styled-icons/boxicons-regular";
 import { connectState } from "../../../redux/connector";
 import { useLocation, useParams } from "react-router-dom";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -14,13 +15,10 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { attachContextMenu, openContextMenu } from 'preact-context-menu';
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
 
-import logoSVG from '../../../assets/logo.svg';
-import Tooltip from "../../common/Tooltip";
-import UserIcon from "../../common/user/UserIcon";
-
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
         <svg
@@ -29,13 +27,14 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             aria-hidden="true"
             viewBox="0 0 32 32"
         >
-            <foreignObject x="0" y="0" width="32" height="32">
+            <use href="#serverIndicator" />
+            <foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
                 { children }
             </foreignObject>
             {unread === 'unread' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"white"}
                 />
@@ -43,7 +42,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             {unread === 'mention' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"red"}
                 />

src/components/ui/Masks.tsx

@@ -0,0 +1,18 @@
+// This file must be imported and used at least once for SVG masks.
+
+export default function Masks() {
+    return (
+        <svg width={0} height={0} style={{ position: 'fixed' }}>
+            <defs>
+                <mask id="server">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="5" r="7" fill={"black"} />
+                </mask>
+                <mask id="user">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="27" r="7" fill={"black"} />
+                </mask>
+            </defs>
+        </svg>
+    )
+}

src/pages/app.tsx

@@ -1,6 +1,7 @@
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
 import Preloader from "../components/ui/Preloader";
 import { Route, Switch } from "react-router-dom";
+import Masks from "../components/ui/Masks";
 import Context from "../context";
 
 import { lazy, Suspense } from "preact/compat";
@@ -10,6 +11,7 @@ const RevoltApp = lazy(() => import('./RevoltApp'));
 export function App() {
     return (
         <Context>
+            <Masks />
             {/* 
             // @ts-expect-error */}
             <Suspense fallback={<Preloader type="spinner" />}>