chore: Refactor icon components

fix: Alignment of Outline logo component

app/components/Icons/CollectionIcon.tsx

@@ -0,0 +1,53 @@
+import { observer } from "mobx-react";
+import { CollectionIcon } from "outline-icons";
+import { getLuminance } from "polished";
+import * as React from "react";
+import Collection from "~/models/Collection";
+import { icons } from "~/components/IconPicker";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
+
+type Props = {
+  /** The collection to show an icon for */
+  collection: Collection;
+  /** Whether the icon should be the "expanded" graphic when displaying the default collection icon */
+  expanded?: boolean;
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the collection color */
+  color?: string;
+};
+
+function ResolvedCollectionIcon({
+  collection,
+  color: inputColor,
+  expanded,
+  size,
+}: 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") {
+    try {
+      const Component = icons[collection.icon].component;
+      return <Component color={color} size={size} />;
+    } catch (error) {
+      Logger.warn("Failed to render custom icon", {
+        icon: collection.icon,
+      });
+    }
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default observer(ResolvedCollectionIcon);

app/components/Icons/EmojiIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  /* The emoji to render */
+  emoji: string;
+  /* The size of the emoji, 24px is default to match standard icons */
+  size?: number;
+};
+
+/**
+ * EmojiIcon is a component that renders an emoji in the size of a standard icon
+ * in a way that can be used wherever an Icon would be.
+ */
+export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
+  return (
+    <Span $size={size} {...rest}>
+      {emoji}
+    </Span>
+  );
+}
+
+const Span = styled.span<{ $size: number }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  text-indent: -0.15em;
+  font-size: 14px;
+`;

app/components/Icons/MarkdownIcon.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 
 type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
   size?: number;
+  /** The color of the icon, defaults to the current text color */
   color?: string;
 };
 

app/components/Icons/OutlineIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+  /* Whether the safe area should be removed and have graphic across full size */
+  cover?: boolean;
+};
+
+export default function OutlineIcon({
+  size = 24,
+  cover,
+  color = "currentColor",
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox={cover ? "2 2 20 20" : "0 0 24 24"}
+      version="1.1"
+    >
+      <path d="M14.6667 20.2155V20.7163C14.6667 21.4253 14.0697 22 13.3333 22C13.1044 22 12.8792 21.9432 12.6797 21.8351L4.67965 17.5028C4.25982 17.2754 4 16.8478 4 16.384V7.61623C4 7.15248 4.25982 6.72478 4.67965 6.49742L12.6797 2.16508C13.3215 1.81751 14.1344 2.03666 14.4954 2.65456C14.6077 2.8467 14.6667 3.06343 14.6667 3.28388V3.78471L15.6169 3.51027C16.3222 3.30655 17.0655 3.69189 17.2771 4.37093C17.3144 4.49059 17.3333 4.61486 17.3333 4.73979V5.26091L18.5013 5.12036C19.232 5.03242 19.8984 5.53141 19.9897 6.23488C19.9966 6.2877 20 6.34088 20 6.3941V17.6061C20 18.3151 19.403 18.8898 18.6667 18.8898C18.6114 18.8898 18.5561 18.8865 18.5013 18.8799L17.3333 18.7393V19.2604C17.3333 19.9694 16.7364 20.5441 16 20.5441C15.8702 20.5441 15.7412 20.5259 15.6169 20.49L14.6667 20.2155ZM14.6667 18.8753L16 19.2604V4.73979L14.6667 5.12488V18.8753ZM17.3333 6.55456V17.4457L18.6667 17.6061V6.3941L17.3333 6.55456ZM5.33333 7.61623V16.384L13.3333 20.7163V3.28388L5.33333 7.61623ZM6.66667 8.47006L8 7.82823V16.172L6.66667 15.5302V8.47006Z" />
+    </svg>
+  );
+}

app/components/Icons/SlackIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+};
+
+export default function SlackIcon({
+  size = 24,
+  color = "currentColor",
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      version="1.1"
+    >
+      <path d="M7.36156352,14.1107492 C7.36156352,15.0358306 6.60586319,15.7915309 5.68078176,15.7915309 C4.75570033,15.7915309 4,15.0358306 4,14.1107492 C4,13.1856678 4.75570033,12.4299674 5.68078176,12.4299674 L7.36156352,12.4299674 L7.36156352,14.1107492 Z M8.20846906,14.1107492 C8.20846906,13.1856678 8.96416938,12.4299674 9.88925081,12.4299674 C10.8143322,12.4299674 11.5700326,13.1856678 11.5700326,14.1107492 L11.5700326,18.3192182 C11.5700326,19.2442997 10.8143322,20 9.88925081,20 C8.96416938,20 8.20846906,19.2442997 8.20846906,18.3192182 C8.20846906,18.3192182 8.20846906,14.1107492 8.20846906,14.1107492 Z M9.88925081,7.36156352 C8.96416938,7.36156352 8.20846906,6.60586319 8.20846906,5.68078176 C8.20846906,4.75570033 8.96416938,4 9.88925081,4 C10.8143322,4 11.5700326,4.75570033 11.5700326,5.68078176 L11.5700326,7.36156352 L9.88925081,7.36156352 Z M9.88925081,8.20846906 C10.8143322,8.20846906 11.5700326,8.96416938 11.5700326,9.88925081 C11.5700326,10.8143322 10.8143322,11.5700326 9.88925081,11.5700326 L5.68078176,11.5700326 C4.75570033,11.5700326 4,10.8143322 4,9.88925081 C4,8.96416938 4.75570033,8.20846906 5.68078176,8.20846906 C5.68078176,8.20846906 9.88925081,8.20846906 9.88925081,8.20846906 Z M16.6384365,9.88925081 C16.6384365,8.96416938 17.3941368,8.20846906 18.3192182,8.20846906 C19.2442997,8.20846906 20,8.96416938 20,9.88925081 C20,10.8143322 19.2442997,11.5700326 18.3192182,11.5700326 L16.6384365,11.5700326 L16.6384365,9.88925081 Z M15.7915309,9.88925081 C15.7915309,10.8143322 15.0358306,11.5700326 14.1107492,11.5700326 C13.1856678,11.5700326 12.4299674,10.8143322 12.4299674,9.88925081 L12.4299674,5.68078176 C12.4299674,4.75570033 13.1856678,4 14.1107492,4 C15.0358306,4 15.7915309,4.75570033 15.7915309,5.68078176 L15.7915309,9.88925081 Z M14.1107492,16.6384365 C15.0358306,16.6384365 15.7915309,17.3941368 15.7915309,18.3192182 C15.7915309,19.2442997 15.0358306,20 14.1107492,20 C13.1856678,20 12.4299674,19.2442997 12.4299674,18.3192182 L12.4299674,16.6384365 L14.1107492,16.6384365 Z M14.1107492,15.7915309 C13.1856678,15.7915309 12.4299674,15.0358306 12.4299674,14.1107492 C12.4299674,13.1856678 13.1856678,12.4299674 14.1107492,12.4299674 L18.3192182,12.4299674 C19.2442997,12.4299674 20,13.1856678 20,14.1107492 C20,15.0358306 19.2442997,15.7915309 18.3192182,15.7915309 L14.1107492,15.7915309 Z" />
+    </svg>
+  );
+}

app/components/Icons/ZapierIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+};
+
+export default function ZapierIcon({
+  size = 24,
+  color = "currentColor",
+}: Props) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      fill={color}
+      viewBox="0 0 24 24"
+      version="1.1"
+    >
+      <path d="M14,12.00348 C13.9996,12.59796 13.89092,13.16708 13.6928,13.69244 C13.16752,13.89072 12.59816,13.99964 12.00344,14.00004 L11.99656,14.00004 C11.40216,13.99964 10.83296,13.89104 10.30768,13.69284 C10.10952,13.16764 10.0004,12.59828 10,12.00364 L10,11.99672 C10.0004,11.40224 10.10928,10.83312 10.30712,10.3078 C10.83264,10.10964 11.40192,10.0006 11.99656,10.0002 L12.00344,10.0002 C12.59816,10.0006 13.16752,10.10964 13.69276,10.3078 C13.89076,10.83316 13.99956,11.40228 13.99996,11.99676 L13.99996,12.00368 L13.99996,12.0036 L14,12.00348 Z M19.8888,10.66668 L15.21896,10.66668 L18.52096,7.36468 C18.2617173,7.00059444 17.9725547,6.65876921 17.65648,6.34276 L17.65632,6.34244 C17.340564,6.02673022 16.9990638,5.73786527 16.63536,5.47884 L13.33336,8.78084 L13.33336,4.11128 C12.894135,4.03747693 12.4495423,4.00025584 12.00416,4 L11.99568,4 C11.5503533,4.00023789 11.1058145,4.03743219 10.66664,4.1112 L10.66664,8.78108 L7.36464,5.47908 C7.00075543,5.7381962 6.65910565,6.02719699 6.34324,6.34308 L6.34204,6.34416 C6.02660762,6.65978768 5.73799769,7.00112635 5.4792,7.36464 L8.7812,10.66664 L4.1112,10.66664 C4.1112,10.66664 4.00016,11.54384 4,11.99704 L4,12.00284 C4.00016664,12.4487002 4.03736113,12.8937765 4.1112,13.33348 L8.78104,13.33348 L5.47904,16.63548 C5.99830995,17.3645251 6.63559493,18.0018101 7.36464,18.52108 L10.66664,15.21916 L10.66664,19.8888 C11.1053956,19.962476 11.5495017,19.9996699 11.9944,20 L12.00584,20 C12.4506842,19.999644 12.8947349,19.9624502 13.33344,19.8888 L13.33344,15.21892 L16.63544,18.52092 C16.9992044,18.2618792 17.3407586,17.972987 17.65656,17.65724 L17.65736,17.65664 C17.9730579,17.3408301 18.2619218,16.9992911 18.52096,16.63556 L15.21896,13.33348 L19.8888,13.33348 C19.9624671,12.8947771 19.999661,12.4507249 20,12.00588 L20,11.9944 C19.999644,11.5495558 19.9624502,11.1055051 19.8888,10.6668 L19.8888,10.66668 Z" />
+    </svg>
+  );
+}