chore(components): migrate icons

app/.eslintrc.js

@@ -59,7 +59,18 @@ module.exports = {
         module: "@arizeai/components",
         use: "@phoenix/components/button",
       },
+      {
+        name: "Icon",
+        module: "@arizeai/components",
+        use: "@phoenix/components/icon",
+      },
+      {
+        name: "Icons",
+        module: "@arizeai/components",
+        use: "@phoenix/components/icon",
+      },
     ],
+    "no-duplicate-imports": "error",
   },
   settings: {
     react: {

app/package.json

@@ -129,6 +129,7 @@
     "dev:server:init": "tox r -e phoenix_main -- --dev serve --with-trace-fixtures=llama_index_rag --with-projects=demo_llama_index --force-fixture-ingestion",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
     "prettier": "prettier --write './src/**/*'",
     "prettier:check": "prettier --check './src/**/*'",
     "storybook": "storybook dev -p 6007",

app/src/components/CopyToClipboardButton.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from "react";
 import copy from "copy-to-clipboard";
 
-import { Icon, Icons, Tooltip, TooltipTrigger } from "@arizeai/components";
+import { Tooltip, TooltipTrigger } from "@arizeai/components";
 
-const SHOW_COPIED_TIMEOUT_MS = 2000;
+import { Button, ButtonProps, Icon, Icons } from "@phoenix/components";
 
-import { Button, ButtonProps } from "@phoenix/components";
+const SHOW_COPIED_TIMEOUT_MS = 2000;
 
 export type CopyToClipboardButtonProps = Omit<
   ButtonProps,

app/src/components/ExternalLink.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { css } from "@emotion/react";
 
-import { Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@phoenix/components";
 
 export type ExternalLinkProps = {
   href: string;

app/src/components/LinkButton.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { css } from "@emotion/react";
 
-import { ArrowIosForwardOutline, Icon } from "@arizeai/components";
+import { Icon, Icons } from "@phoenix/components";
 
 const linkButtonCSS = css`
   display: inline-flex;
@@ -21,7 +21,7 @@ export function LinkButton(props: PropsWithChildren<{ onClick: () => void }>) {
   const { children, onClick } = props;
   return (
     <button css={linkButtonCSS} onClick={onClick}>
-      {children} <Icon svg={<ArrowIosForwardOutline />} />
+      {children} <Icon svg={<Icons.ArrowIosForwardOutline />} />
     </button>
   );
 }

app/src/components/annotation/AnnotationLabel.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Icon, Icons, Text } from "@arizeai/components";
+import { Flex, Text } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 

app/src/components/auth/DeleteAPIKeyButton.tsx

@@ -1,16 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import {
-  Dialog,
-  DialogContainer,
-  Flex,
-  Icon,
-  Icons,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Flex, Text, View } from "@arizeai/components";
 
-import { Button } from "@phoenix/components";
+import { Button, Icon, Icons } from "@phoenix/components";
 
 export function DeleteAPIKeyButton({
   handleDelete,

app/src/components/combobox/ComboBox.tsx

@@ -14,8 +14,7 @@ import {
   ValidationResult,
 } from "react-aria-components";
 
-import { Icon, Icons } from "@arizeai/components";
-
+import { Icon, Icons } from "@phoenix/components";
 import { SizingProps } from "@phoenix/components/types";
 
 import { comboBoxCSS, comboBoxItemCSS, comboBoxPopoverCSS } from "./styles";

app/src/components/dataset/NewDatasetButton.tsx

@@ -1,15 +1,8 @@
 import React, { useState } from "react";
 
-import {
-  Alert,
-  Card,
-  Icon,
-  Icons,
-  PopoverTrigger,
-  View,
-} from "@arizeai/components";
+import { Alert, Card, PopoverTrigger, View } from "@arizeai/components";
 
-import { Button } from "@phoenix/components";
+import { Button, Icon, Icons } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 
 import { CreateDatasetForm } from "./CreateDatasetForm";

app/src/components/datetime/LastNTimeRangePicker.tsx

@@ -1,6 +1,8 @@
 import React, { Key } from "react";
 
-import { Icon, Icons, Item, Picker } from "@arizeai/components";
+import { Item, Picker } from "@arizeai/components";
+
+import { Icon, Icons } from "@phoenix/components";
 
 import { LAST_N_TIME_RANGES } from "./constants";
 import { LastNTimeRangeKey } from "./types";

app/src/components/experiment/ExperimentActionMenu.tsx

@@ -8,12 +8,11 @@ import {
   Dialog,
   DialogContainer,
   Flex,
-  Icon,
-  Icons,
   Item,
   Text,
 } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { assertUnreachable } from "@phoenix/typeUtils";

app/src/components/icon/Icon.tsx

@@ -0,0 +1,55 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { css } from "@emotion/react";
+
+import { ColorValue } from "@phoenix/components/types";
+import { colorValue } from "@phoenix/components/utils";
+
+interface IconProps extends HTMLAttributes<HTMLElement> {
+  svg: ReactNode;
+  /**
+   * Passed through by wrapping components.
+   * @private
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * The color of the icon
+   * @default 'inherit'
+   */
+  color?: ColorValue | "inherit";
+}
+
+/**
+ * Wraps the svg in a reasonable size and applies a color
+ */
+export const Icon = ({
+  svg,
+  isDisabled: _isDisabled,
+  color = "inherit",
+  ...restProps
+}: IconProps) => {
+  const resolvedColor = color === "inherit" ? "inherit" : colorValue(color);
+  return (
+    <i
+      className={"ac-icon-wrap"}
+      css={css`
+        width: 1em;
+        height: 1em;
+        font-size: 1.3rem;
+        color: ${resolvedColor};
+        display: flex;
+        svg {
+          fill: currentColor;
+          width: 1em;
+          height: 1em;
+          display: inline-block;
+          flex-shrink: 0;
+          user-select: none;
+        }
+      `}
+      {...restProps}
+    >
+      {svg}
+    </i>
+  );
+};