'init'

app/components/Emoji/Emoji.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+interface EmojiProps {
+    unified: string;
+    size?: number;
+}
+
+export function Emoji(props: EmojiProps) {
+    const [error, setError] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+
+    const handleError = () => setError(true);
+    const handleLoad = () => setLoaded(true);
+
+    return (
+        <>
+        <span style={{ userSelect: 'auto' }}>
+            {!error && (
+                <>
+                    <img
+                        style={{
+                            width: props.size ? `${props.size}px` : '1.4em',
+                            height: props.size ? `${props.size}px` : '1.4em',
+                            verticalAlign: 'sub',
+                            marginLeft: '2px',
+                            marginRight: '2px',
+                           // display: loaded ? 'inline' : 'none'
+                        }}
+                        onError={handleError}
+                        onLoad={handleLoad}
+                        src={`https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${props.unified}.png`}
+                        alt={props.unified}
+                    />
+                </>
+            )}
+            {error && props.unified}
+        </span>
+        </>
+    )
+}