migrate all icons

app/.eslintrc.js

@@ -70,6 +70,7 @@ module.exports = {
         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/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/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/markdown/MarkdownModeRadioGroup.tsx

@@ -2,15 +2,15 @@ import React from "react";
 
 import {
   FileTextOutline,
-  Icon,
   Radio,
   RadioGroup,
-  TextOutline,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
+
 import { useMarkdownMode } from "./MarkdownDisplayContext";
 import { MarkdownDisplayMode } from "./types";
 
@@ -33,7 +33,7 @@ export function MarkdownModeRadioGroup({
       <Radio label="text" value="text">
         <TooltipTrigger placement="top" delay={1000} offset={10}>
           <TriggerWrap>
-            <Icon svg={<TextOutline />} />
+            <Icon svg={<Icons.TextOutline />} />
           </TriggerWrap>
           <Tooltip>Text</Tooltip>
         </TooltipTrigger>

app/src/components/nav/Navbar.tsx

@@ -2,8 +2,9 @@ import React, { ReactNode, useState } from "react";
 import { Link, NavLink as RRNavLink } from "react-router-dom";
 import { css, Theme } from "@emotion/react";
 
-import { Icon, Icons, Text } from "@arizeai/components";
+import { Text } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { useTheme } from "@phoenix/contexts";
 
 import { Logo } from "./Logo";

app/src/components/pointcloud/CanvasModeRadioGroup.tsx

@@ -2,15 +2,14 @@ import React from "react";
 import { css } from "@emotion/react";
 
 import {
-  Icon,
-  Icons,
   Radio,
   RadioGroup,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { CanvasMode } from "@phoenix/store";
 
 const radioItemCSS = css`

app/src/components/pointcloud/InferencesVisibilitySettings.tsx

@@ -1,8 +1,10 @@
 import React, { ChangeEvent, useCallback, useMemo } from "react";
 import { css } from "@emotion/react";
 
-import { FALLBACK_COLOR } from "@phoenix/constants/pointCloudConstants";
-import { ColoringStrategy } from "@phoenix/constants/pointCloudConstants";
+import {
+  ColoringStrategy,
+  FALLBACK_COLOR,
+} from "@phoenix/constants/pointCloudConstants";
 import { usePointCloudContext } from "@phoenix/contexts";
 import { useDefaultColorScheme } from "@phoenix/pages/embedding/useDefaultColorScheme";
 import { assertUnreachable } from "@phoenix/typeUtils";

app/src/components/pointcloud/PointCloud.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 import { useContextBridge } from "@react-three/drei";
-import { css } from "@emotion/react";
-import { ThemeContext as EmotionThemeContext } from "@emotion/react";
+import { css, ThemeContext as EmotionThemeContext } from "@emotion/react";
 
 import {
   ActionTooltip,
@@ -19,8 +18,7 @@ import {
   ThreeDimensionalControls,
 } from "@arizeai/point-cloud";
 
-import { Icon, Icons } from "@phoenix/components";
-import { Button } from "@phoenix/components";
+import { Button, Icon, Icons } from "@phoenix/components";
 import { UNKNOWN_COLOR } from "@phoenix/constants/pointCloudConstants";
 import {
   InferencesContext,

app/src/components/pointcloud/PointCloudDisplaySettings.tsx

@@ -5,8 +5,7 @@ import { Alert, Form } from "@arizeai/components";
 
 import { ConnectedDimensionPicker } from "@phoenix/components/form";
 import { ColoringStrategy } from "@phoenix/constants/pointCloudConstants";
-import { useInferences } from "@phoenix/contexts";
-import { usePointCloudContext } from "@phoenix/contexts";
+import { useInferences, usePointCloudContext } from "@phoenix/contexts";
 
 import { Loading } from "../Loading";
 

app/src/components/pointcloud/PointCloudPoints.tsx

@@ -1,5 +1,4 @@
-import React, { startTransition } from "react";
-import { useCallback, useMemo } from "react";
+import React, { startTransition, useCallback, useMemo } from "react";
 import debounce from "lodash/debounce";
 import { lighten, shade } from "polished";
 

app/src/components/pointcloud/SelectionDisplayRadioGroup.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
-import { Icon, Icons, Radio, RadioGroup } from "@arizeai/components";
+import { Radio, RadioGroup } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { SelectionDisplay } from "@phoenix/constants/pointCloudConstants";
 
 /**

app/src/components/table/TableExpandButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@phoenix/components";
 
 type TableExpandButtonProps = {
   onClick: (event: unknown) => void;

app/src/components/trace/AnnotationActionMenu.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-import { ActionMenu, Flex, Icon, Icons, Item, Text } from "@arizeai/components";
+import { ActionMenu, Flex, Item, Text } from "@arizeai/components";
+
+import { Icon, Icons } from "@phoenix/components";
 
 type AnnotationActionMenuProps = {
   onDelete: () => void;

app/src/components/trace/LatencyText.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 
-import { Flex, Icon, Icons, Text, TextProps } from "@arizeai/components";
+import { Flex, Text, TextProps } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
-
 export function LatencyText({
   latencyMs,
   textSize = "medium",

app/src/components/trace/SpanStatusCodeIcon.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-import { Icon, Icons } from "@arizeai/components";
-
+import { Icon, Icons } from "@phoenix/components";
 import { assertUnreachable } from "@phoenix/typeUtils";
 
 import { SpanStatusCodeType } from "./types";

app/src/components/trace/TokenCount.tsx

@@ -3,15 +3,15 @@ import { css } from "@emotion/react";
 
 import {
   Flex,
-  Icon,
-  Icons,
   Text,
   TextProps,
   Tooltip,
   TooltipTrigger,
   TriggerWrap,
 } from "@arizeai/components";
 
+import { Icon, Icons } from "@phoenix/components";
+
 type TokenCountProps = {
   /**
    * The total number of tokens in the prompt and completion

app/src/pages/Layout.tsx

@@ -2,9 +2,9 @@ import React, { Suspense, useCallback, useMemo } from "react";
 import { Outlet, useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Flex, Icon, Icons } from "@arizeai/components";
+import { Flex } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Icon, Icons, Loading } from "@phoenix/components";
 import {
   Brand,
   DocsLink,

app/src/pages/apis/APIsPage.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Alert, Icon, Icons, TabPane, Tabs } from "@arizeai/components";
+import { Alert, TabPane, Tabs } from "@arizeai/components";
+
+import { Icon, Icons } from "@phoenix/components";
 
 const basename = window.Config.basename;
 const iframeStyle = {

app/src/pages/auth/LoginForm.tsx

@@ -5,10 +5,8 @@ import { css } from "@emotion/react";
 
 import { Alert, Form, TextField, View } from "@arizeai/components";
 
-import { Button, Icon, Icons } from "@phoenix/components";
-import { Link } from "@phoenix/components";
-import { prependBasename } from "@phoenix/utils/routingUtils";
-import { getReturnUrl } from "@phoenix/utils/routingUtils";
+import { Button, Icon, Icons, Link } from "@phoenix/components";
+import { getReturnUrl, prependBasename } from "@phoenix/utils/routingUtils";
 
 type LoginFormParams = {
   email: string;

app/src/pages/dataset/DatasetCodeDropdown.tsx

@@ -7,15 +7,13 @@ import {
   DropdownTrigger,
   Flex,
   Form,
-  Icon,
-  Icons,
   TabPane,
   Tabs,
   TextField,
   View,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton } from "@phoenix/components";
+import { CopyToClipboardButton, Icon, Icons } from "@phoenix/components";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 import { BASE_URL } from "@phoenix/config";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";

app/src/pages/dataset/DatasetHistoryButton.tsx

@@ -1,14 +1,8 @@
 import React, { ReactNode, Suspense, useState } from "react";
 
-import {
-  DialogContainer,
-  Icon,
-  Icons,
-  Tooltip,
-  TooltipTrigger,
-} from "@arizeai/components";
+import { DialogContainer, Tooltip, TooltipTrigger } from "@arizeai/components";
 
-import { Button } from "@phoenix/components";
+import { Button, Icon, Icons } from "@phoenix/components";
 
 import { DatasetHistoryDialog } from "./DatasetHistoryDialog";
 

app/src/pages/dataset/DatasetHistoryTable.tsx

@@ -8,8 +8,7 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Icon, Icons } from "@arizeai/components";
-
+import { Icon, Icons } from "@phoenix/components";
 import { tableCSS } from "@phoenix/components/table/styles";
 import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";

app/src/pages/dataset/DatasetPage.tsx

@@ -6,16 +6,14 @@ import {
   ActionMenu,
   Counter,
   Flex,
-  Icon,
-  Icons,
   Item,
   TabPane,
   Tabs,
   Text,
   View,
 } from "@arizeai/components";
 
-import { Button, Loading } from "@phoenix/components";
+import { Button, Icon, Icons, Loading } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 import {
   DatasetProvider,

app/src/pages/dataset/RunExperimentButton.tsx

@@ -1,16 +1,8 @@
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 
-import {
-  Dialog,
-  DialogContainer,
-  Icon,
-  Icons,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Text, View } from "@arizeai/components";
 
-import { Button } from "@phoenix/components";
-import { ExternalLink } from "@phoenix/components";
+import { Button, ExternalLink, Icon, Icons } from "@phoenix/components";
 import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
 import { CodeWrap } from "@phoenix/components/code/CodeWrap";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";