feat: Unified icon picker (#7038)

app/components/Icon.tsx

@@ -0,0 +1,93 @@
+import { getLuminance } from "polished";
+import * as React from "react";
+import { randomElement } from "@shared/random";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import { determineIconType } from "@shared/utils/icon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
+
+type IconProps = {
+  value: string;
+  color?: string;
+  size?: number;
+  initial?: string;
+  className?: string;
+};
+
+const Icon = ({
+  value: icon,
+  color,
+  size = 24,
+  initial,
+  className,
+}: IconProps) => {
+  const iconType = determineIconType(icon);
+
+  if (!iconType) {
+    Logger.warn("Failed to determine icon type", {
+      icon,
+    });
+    return null;
+  }
+
+  try {
+    if (iconType === IconType.Outline) {
+      return (
+        <OutlineIcon
+          value={icon}
+          color={color}
+          size={size}
+          initial={initial}
+          className={className}
+        />
+      );
+    }
+
+    return <EmojiIcon emoji={icon} size={size} className={className} />;
+  } catch (err) {
+    Logger.warn("Failed to render icon", {
+      icon,
+    });
+  }
+
+  return null;
+};
+
+type OutlineIconProps = {
+  value: string;
+  color?: string;
+  size?: number;
+  initial?: string;
+  className?: string;
+};
+
+const OutlineIcon = ({
+  value: icon,
+  color: inputColor,
+  initial,
+  size,
+  className,
+}: OutlineIconProps) => {
+  const { ui } = useStores();
+
+  let color = inputColor ?? randomElement(colorPalette);
+
+  // 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.
+  if (!inputColor && ui.resolvedTheme === "dark" && color !== "currentColor") {
+    color = getLuminance(color) > 0.09 ? color : "currentColor";
+  }
+
+  const Component = IconLibrary.getComponent(icon);
+
+  return (
+    <Component color={color} size={size} className={className}>
+      {initial}
+    </Component>
+  );
+};
+
+export default Icon;