Port and re-write icon code.

src/components/common/ChannelIcon.tsx

@@ -0,0 +1,45 @@
+import { useContext } from "preact/hooks";
+import { Hash } from "@styled-icons/feather";
+import IconBase, { IconBaseProps } from "./IconBase";
+import { Channels } from "revolt.js/dist/api/objects";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel> {
+    isServerChannel?: boolean;
+}
+
+const fallback = '/assets/group.png';
+export default function ChannelIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
+    const { client } = useContext(AppContext);
+
+    const { size, target, attachment, isServerChannel: server, animate, children, as, ...svgProps } = props;
+    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+    const isServerChannel = server || target?.channel_type === 'TextChannel';
+
+    if (typeof iconURL === 'undefined') {
+        if (isServerChannel) {
+            return (
+                <Hash size={size} />
+            )
+        }
+    }
+
+    return (
+        <IconBase {...svgProps}
+            width={size}
+            height={size}
+            aria-hidden="true"
+            viewBox="0 0 32 32"
+            square={isServerChannel}>
+            <foreignObject x="0" y="0" width="32" height="32">
+                <img src={iconURL ?? fallback}
+                    onError={ e => {
+                        let el = e.currentTarget;
+                        if (el.src !== fallback) {
+                            el.src = fallback
+                        }
+                    } } />
+            </foreignObject>
+        </IconBase>
+    );
+}

src/components/common/IconBase.tsx

@@ -0,0 +1,22 @@
+import { Attachment } from "revolt.js/dist/api/objects";
+import styled, { css } from "styled-components";
+
+export interface IconBaseProps<T> {
+    target?: T;
+    attachment?: Attachment;
+
+    size: number;
+    animate?: boolean;
+}
+
+export default styled.svg<{ square?: boolean }>`
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        ${ props => !props.square && css`
+            border-radius: 50%;
+        ` }
+    }
+`;

src/components/common/ServerIcon.tsx

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import { useContext } from "preact/hooks";
+import { Server } from "revolt.js/dist/api/objects";
+import IconBase, { IconBaseProps } from "./IconBase";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+interface Props extends IconBaseProps<Server> {
+    server_name?: string;
+}
+
+const ServerText = styled.div`
+    display: grid;
+    padding: .2em;
+    overflow: hidden;
+    border-radius: 50%;
+    place-items: center;
+    color: var(--foreground);
+    background: var(--primary-background);
+`;
+
+const fallback = '/assets/group.png';
+export default function ServerIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
+    const { client } = useContext(AppContext);
+
+    const { target, attachment, size, animate, server_name, children, as, ...svgProps } = props;
+    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+
+    if (typeof iconURL === 'undefined') {
+        const name = target?.name ?? server_name ?? '';
+
+        return (
+            <ServerText style={{ width: size, height: size }}>
+                { name.split(' ')
+                      .map(x => x[0])
+                      .filter(x => typeof x !== 'undefined') }
+            </ServerText>
+        )
+    }
+
+    return (
+        <IconBase {...svgProps}
+            width={size}
+            height={size}
+            aria-hidden="true"
+            viewBox="0 0 32 32">
+            <foreignObject x="0" y="0" width="32" height="32">
+                <img src={iconURL}
+                    onError={ e => {
+                        let el = e.currentTarget;
+                        if (el.src !== fallback) {
+                            el.src = fallback
+                        }
+                    }} />
+            </foreignObject>
+        </IconBase>
+    );
+}

src/components/common/UserIcon.tsx

@@ -0,0 +1,96 @@
+import { User } from "revolt.js";
+import { useContext } from "preact/hooks";
+import { MicOff } from "@styled-icons/feather";
+import styled, { css } from "styled-components";
+import { ThemeContext } from "../../context/Theme";
+import { Users } from "revolt.js/dist/api/objects";
+import IconBase, { IconBaseProps } from "./IconBase";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+type VoiceStatus = "muted";
+interface Props extends IconBaseProps<User> {
+    status?: boolean;
+    voice?: VoiceStatus;
+}
+
+export function useStatusColour(user?: User) {
+    const theme = useContext(ThemeContext);
+
+    return (
+        user?.online &&
+            user?.status?.presence !== Users.Presence.Invisible
+                ? user?.status?.presence === Users.Presence.Idle
+                    ? theme["status-away"]
+                    : user?.status?.presence ===
+                        Users.Presence.Busy
+                    ? theme["status-busy"]
+                    : theme["status-online"]
+                : theme["status-invisible"]
+    );
+}
+
+const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        stroke: white;
+    }
+
+    ${ props => props.status === 'muted' && css`
+        background: var(--error);
+    ` }
+`;
+
+const fallback = '/assets/user.png';
+export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
+    const { client } = useContext(AppContext);
+
+    const { target, attachment, size, voice, status, animate, children, as, ...svgProps } = props;
+    const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate);
+
+    return (
+        <IconBase {...svgProps}
+            width={size}
+            height={size}
+            aria-hidden="true"
+            viewBox="0 0 32 32">
+            <foreignObject x="0" y="0" width="32" height="32">
+                {
+                    <img src={iconURL}
+                        draggable={false}
+                        onError={ e => {
+                            let el = e.currentTarget;
+                            if (el.src !== fallback) {
+                                el.src = fallback
+                            }
+                        }} />
+                }
+            </foreignObject>
+            {props.status && (
+                <circle
+                    cx="27"
+                    cy="27"
+                    r="5"
+                    fill={useStatusColour(target)}
+                />
+            )}
+            {props.voice && (
+                <foreignObject
+                    x="22"
+                    y="22"
+                    width="10"
+                    height="10">
+                    <VoiceIndicator status={props.voice}>
+                        {props.voice === "muted" && <MicOff size={6} />}
+                    </VoiceIndicator>
+                </foreignObject>
+            )}
+        </IconBase>
+    );
+}