Replace icons with icons from new @apollo/icons package

.changeset/modern-needles-dance.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Use icons from new `@apollo/icons` package.

package.json

@@ -34,9 +34,10 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/brand": "^0.3.0",
+    "@apollo/brand": "^0.4.0",
     "@apollo/client": "^3.8.8",
-    "@apollo/tailwind-preset": "^0.1.2",
+    "@apollo/icons": "^0.0.3",
+    "@apollo/tailwind-preset": "^0.1.3",
     "@headlessui/react": "^1.7.17",
     "@radix-ui/react-tabs": "^1.0.2",
     "clsx": "^2.1.0",

src/application/App.tsx

@@ -15,9 +15,9 @@ import { Cache } from "./components/Cache/Cache";
 import { GetOperationCounts, GetOperationCountsVariables } from "./types/gql";
 import { Tabs } from "./components/Tabs";
 import { Button } from "./components/Button";
-import { SettingsIcon } from "./components/icons/Settings";
+import IconSettings from "@apollo/icons/default/IconSettings.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
-import Logo from "@apollo/brand/logos/symbol.svg";
+import Logo from "@apollo/icons/logos/LogoSymbol.svg";
 
 export const reloadStatus = makeVar<boolean>(false);
 
@@ -92,7 +92,7 @@ export const App = () => {
             variant="hidden"
             onClick={() => setSettingsOpen(true)}
           >
-            <SettingsIcon aria-hidden="true" />
+            <IconSettings aria-hidden="true" className="w-4" />
             <span className="sr-only">Settings</span>
           </Button>
           <SettingsModal open={settingsOpen} onOpen={setSettingsOpen} />

src/application/components/CodeBlock.tsx

@@ -4,7 +4,7 @@ import { colors } from "@apollo/brand";
 import { clsx } from "clsx";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { ColorTheme, colorTheme } from "../theme";
-import { CopyIcon } from "./icons/Copy";
+import IconCopy from "@apollo/icons/default/IconCopy.svg";
 import { Button } from "./Button";
 import { useMemo } from "react";
 
@@ -175,7 +175,7 @@ export const CodeBlock = ({
           data-testid="copy-query-strin"
           className="sticky top-0"
         >
-          <CopyIcon />
+          <IconCopy className="w-4" />
           Copy
         </Button>
       </CopyToClipboard>

src/application/components/CopyButton.tsx

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";
-import { CopyIcon } from "./icons/Copy";
+import IconCopy from "@apollo/icons/default/IconCopy.svg";
 
 type ButtonProps = ComponentPropsWithoutRef<typeof Button>;
 
@@ -21,7 +21,7 @@ export function CopyButton({
   return (
     <CopyToClipboard text={text}>
       <Button {...rest} className={className} size={size} variant="hidden">
-        <CopyIcon
+        <IconCopy
           className={clsx({
             "h-4": size === "sm" || size === "md",
             "h-2": size === "xs",

src/application/components/Queries/RunInExplorerButton.tsx

@@ -4,7 +4,7 @@ import {
   SET_OPERATION,
 } from "../Explorer/postMessageHelpers";
 import { currentScreen, Screens } from "../Layouts/Navigation";
-import { RunIcon } from "../icons/Run";
+import IconRun from "@apollo/icons/default/IconRun.svg";
 import { Button } from "../Button";
 
 interface RunInExplorerButtonProps {
@@ -39,7 +39,7 @@ export const RunInExplorerButton = ({
         }
       }}
     >
-      <RunIcon aria-hidden />
+      <IconRun aria-hidden className="w-4" />
       Run in Explorer
     </Button>
   );

src/application/components/SearchField.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { SearchIcon } from "./icons/Search";
+import IconSearch from "@apollo/icons/default/IconSearch.svg";
 
 interface SearchFieldProps {
   autoFocus?: boolean;
@@ -18,7 +18,7 @@ export function SearchField({
 }: SearchFieldProps) {
   return (
     <div className={clsx(className, "flex items-center relative")}>
-      <SearchIcon className="absolute left-4 z-10 text-icon-secondary dark:text-icon-secondary-dark" />
+      <IconSearch className="absolute left-4 z-10 text-icon-secondary dark:text-icon-secondary-dark w-4" />
       <input
         autoFocus={autoFocus}
         onChange={(e) => onChange(e.target.value)}