Switch to Lucide icons

package-lock.json

@@ -17,7 +17,6 @@
         "@lezer/generator": "^1.2.2",
         "@lezer/highlight": "^1.1.3",
         "@lezer/lr": "^1.3.3",
-        "@radix-ui/react-icons": "^1.2.0",
         "@react-hook/resize-observer": "^1.2.6",
         "@tailwindcss/container-queries": "^0.1.0",
         "@tanstack/query-sync-storage-persister": "^4.27.1",
@@ -32,6 +31,7 @@
         "focus-trap-react": "^10.1.1",
         "format-graphql": "^1.4.0",
         "framer-motion": "^9.0.4",
+        "lucide-react": "^0.309.0",
         "papaparse": "^5.4.1",
         "parse-color": "^1.0.0",
         "react": "^18.2.0",
@@ -1259,14 +1259,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@radix-ui/react-icons": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
-      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
-      "peerDependencies": {
-        "react": "^16.x || ^17.x || ^18.x"
-      }
-    },
     "node_modules/@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -6438,6 +6430,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.309.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.309.0.tgz",
+      "integrity": "sha512-zNVPczuwFrCfksZH3zbd1UDE6/WYhYAdbe2k7CImVyPAkXLgIwbs6eXQ4loigqDnUFjyFYCI5jZ1y10Kqal0dg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",

package.json

@@ -33,7 +33,6 @@
     "@lezer/generator": "^1.2.2",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
-    "@radix-ui/react-icons": "^1.2.0",
     "@react-hook/resize-observer": "^1.2.6",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tanstack/query-sync-storage-persister": "^4.27.1",
@@ -48,6 +47,7 @@
     "focus-trap-react": "^10.1.1",
     "format-graphql": "^1.4.0",
     "framer-motion": "^9.0.4",
+    "lucide-react": "^0.309.0",
     "papaparse": "^5.4.1",
     "parse-color": "^1.0.0",
     "react": "^18.2.0",

src-web/components/EnvironmentEditDialog.tsx

@@ -189,7 +189,7 @@ const EnvironmentEditor = function ({
         {items != null && (
           <Dropdown items={items}>
             <IconButton
-              icon="dotsV"
+              icon="moreVertical"
               title="Environment Actions"
               size="sm"
               className="!h-auto w-8"

src-web/components/RecentResponsesDropdown.tsx

@@ -54,7 +54,7 @@ export const RecentResponsesDropdown = function ResponsePane({
     >
       <IconButton
         title="Show response history"
-        icon="triangleDown"
+        icon="chevronDown"
         className="ml-auto"
         size="sm"
         iconSize="md"

src-web/components/SettingsDropdown.tsx

@@ -93,7 +93,7 @@ export function SettingsDropdown() {
           key: 'update-mode',
           label: updateMode === 'stable' ? 'Enable Beta' : 'Disable Beta',
           onSelect: () => setUpdateMode(updateMode === 'stable' ? 'beta' : 'stable'),
-          leftSlot: <Icon icon="rocket" />,
+          leftSlot: <Icon icon="flask" />,
         },
         {
           key: 'update-check',

src-web/components/Sidebar.tsx

@@ -595,7 +595,7 @@ const SidebarItem = forwardRef(function SidebarItem(
                   {
                     key: 'sendAll',
                     label: 'Send All',
-                    leftSlot: <Icon icon="paperPlane" />,
+                    leftSlot: <Icon icon="sendHorizontal" />,
                     onSelect: () => sendManyRequests.mutate(child.children.map((c) => c.item.id)),
                   },
                   { type: 'separator', label: itemName },

src-web/components/UrlBar.tsx

@@ -81,7 +81,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
             title="Send Request"
             type="submit"
             className="!h-auto w-8 mr-0.5 my-0.5"
-            icon={loading ? 'update' : 'paperPlane'}
+            icon={loading ? 'update' : 'sendHorizontal'}
             spin={loading}
             hotkeyAction="request.send"
           />

src-web/components/WorkspaceActionsDropdown.tsx

@@ -55,7 +55,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                 <Button
                   className="focus"
                   color="gray"
-                  rightSlot={<Icon icon="openNewWindow" />}
+                  rightSlot={<Icon icon="externalLink" />}
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];

src-web/components/core/Icon.tsx

@@ -1,4 +1,4 @@
-import * as I from '@radix-ui/react-icons';
+import * as lucide from 'lucide-react';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { memo } from 'react';
@@ -6,49 +6,33 @@ import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPa
 import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
 
 const icons = {
-  archive: I.ArchiveIcon,
+  archive: lucide.ArchiveIcon,
-  chat: I.ChatBubbleIcon,
+  chat: lucide.MessageSquare,
-  check: I.CheckIcon,
+  check: lucide.CheckIcon,
-  checkbox: I.CheckboxIcon,
+  chevronDown: lucide.ChevronDownIcon,
-  chevronDown: I.ChevronDownIcon,
+  chevronRight: lucide.ChevronRightIcon,
-  chevronRight: I.ChevronRightIcon,
+  code: lucide.CodeIcon,
-  clock: I.ClockIcon,
+  copy: lucide.CopyIcon,
-  code: I.CodeIcon,
+  moreVertical: lucide.MoreVerticalIcon,
-  colorWheel: I.ColorWheelIcon,
+  download: lucide.DownloadIcon,
-  copy: I.CopyIcon,
+  gripVertical: lucide.GripVerticalIcon,
-  dividerH: I.DividerHorizontalIcon,
+  eye: lucide.EyeIcon,
-  dotsH: I.DotsHorizontalIcon,
+  eyeClosed: lucide.EyeOffIcon,
-  dotsV: I.DotsVerticalIcon,
+  filter: lucide.FilterIcon,
-  download: I.DownloadIcon,
+  flask: lucide.FlaskConicalIcon,
-  drag: I.DragHandleDots2Icon,
+  gear: lucide.CogIcon,
-  eye: I.EyeOpenIcon,
+  keyboard: lucide.KeyboardIcon,
-  eyeClosed: I.EyeClosedIcon,
+  magicWand: lucide.Wand2Icon,
-  gear: I.GearIcon,
+  externalLink: lucide.ExternalLinkIcon,
-  hamburger: I.HamburgerMenuIcon,
+  sendHorizontal: lucide.SendHorizonalIcon,
-  home: I.HomeIcon,
+  pencil: lucide.PencilIcon,
-  keyboard: I.KeyboardIcon,
+  question: lucide.ShieldQuestionIcon,
-  listBullet: I.ListBulletIcon,
+  plus: lucide.PlusIcon,
-  magicWand: I.MagicWandIcon,
+  plusCircle: lucide.PlusCircleIcon,
-  magnifyingGlass: I.MagnifyingGlassIcon,
+  trash: lucide.TrashIcon,
-  minus: I.MinusIcon,
+  update: lucide.RefreshCcwIcon,
-  moon: I.MoonIcon,
+  upload: lucide.UploadIcon,
-  openNewWindow: I.OpenInNewWindowIcon,
+  x: lucide.XIcon,
-  paperPlane: I.PaperPlaneIcon,
-  pencil: I.Pencil2Icon,
-  plus: I.PlusIcon,
-  plusCircle: I.PlusCircledIcon,
-  question: I.QuestionMarkIcon,
-  rocket: I.RocketIcon,
-  rows: I.RowsIcon,
-  square: I.SquareIcon,
-  sun: I.SunIcon,
-  trash: I.TrashIcon,
-  triangleDown: I.TriangleDownIcon,
-  triangleLeft: I.TriangleLeftIcon,
-  triangleRight: I.TriangleRightIcon,
-  update: I.UpdateIcon,
-  upload: I.UploadIcon,
-  x: I.Cross2Icon,
 
   // Custom
   leftPanelHidden: LeftPanelHiddenIcon,

src-web/components/core/Tabs/Tabs.tsx

@@ -104,7 +104,7 @@ export function Tabs({
                     className={btnClassName}
                     rightSlot={
                       <Icon
-                        icon="triangleDown"
+                        icon="chevronDown"
                         className={classNames('-mr-1.5', isActive ? 'opacity-100' : 'opacity-20')}
                       />
                     }

src-web/components/responseViewers/TextViewer.tsx

@@ -49,7 +49,7 @@ export function TextViewer({ response, pretty }: Props) {
       )}
       <IconButton
         size="sm"
-        icon={isSearching ? 'x' : 'magnifyingGlass'}
+        icon={isSearching ? 'x' : 'filter'}
         title={isSearching ? 'Close filter' : 'Filter response'}
         onClick={clearSearch}
       />