feat: Unified icon picker (#7038)

app/components/Icons/CollectionIcon.tsx

@@ -2,10 +2,11 @@ import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import { IconLibrary } from "@shared/utils/IconLibrary";
+import { randomElement } from "@shared/random";
+import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
-import Logger from "~/utils/Logger";
 
 type Props = {
   /** The collection to show an icon for */
@@ -16,6 +17,7 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the collection color */
   color?: string;
+  className?: string;
 };
 
 function ResolvedCollectionIcon({
@@ -23,35 +25,41 @@ function ResolvedCollectionIcon({
   color: inputColor,
   expanded,
   size,
+  className,
 }: Props) {
   const { ui } = useStores();
 
-  // If the chosen icon color is very dark then we invert it in dark mode
-  // otherwise it will be impossible to see against the dark background.
-  const color =
-    inputColor ||
-    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
-      ? getLuminance(collection.color) > 0.09
-        ? collection.color
-        : "currentColor"
-      : collection.color);
+  if (!collection.icon || collection.icon === "collection") {
+    // If the chosen icon color is very dark then we invert it in dark mode
+    // otherwise it will be impossible to see against the dark background.
+    const collectionColor = collection.color ?? randomElement(colorPalette);
+    const color =
+      inputColor ||
+      (ui.resolvedTheme === "dark" && collectionColor !== "currentColor"
+        ? getLuminance(collectionColor) > 0.09
+          ? collectionColor
+          : "currentColor"
+        : collectionColor);
 
-  if (collection.icon && collection.icon !== "collection") {
-    try {
-      const Component = IconLibrary.getComponent(collection.icon);
-      return (
-        <Component color={color} size={size}>
-          {collection.initial}
-        </Component>
-      );
-    } catch (error) {
-      Logger.warn("Failed to render custom icon", {
-        icon: collection.icon,
-      });
-    }
+    return (
+      <CollectionIcon
+        color={color}
+        expanded={expanded}
+        size={size}
+        className={className}
+      />
+    );
   }
 
-  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+  return (
+    <Icon
+      value={collection.icon}
+      color={inputColor ?? collection.color ?? undefined}
+      size={size}
+      initial={collection.initial}
+      className={className}
+    />
+  );
 }
 
 export default observer(ResolvedCollectionIcon);

app/components/Icons/EmojiIcon.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The emoji to render */
   emoji: string;
   /** The size of the emoji, 24px is default to match standard icons */
   size?: number;
+  className?: string;
 };
 
 /**
@@ -15,19 +17,28 @@ type Props = {
 export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
   return (
     <Span $size={size} {...rest}>
-      {emoji}
+      <SVG size={size} emoji={emoji} />
     </Span>
   );
 }
 
 const Span = styled.span<{ $size: number }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  flex-shrink: 0;
+  font-family: ${s("fontFamilyEmoji")};
+  display: inline-block;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
-  text-indent: -0.15em;
-  font-size: ${(props) => props.$size - 10}px;
 `;
+
+const SVG = ({ size, emoji }: { size: number; emoji: string }) => (
+  <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg">
+    <text
+      x="50%"
+      y={"55%"}
+      dominantBaseline="middle"
+      textAnchor="middle"
+      fontSize={size * 0.7}
+    >
+      {emoji}
+    </text>
+  </svg>
+);