Switch to Lucide icons

2026-01-11 20:00:29 +01:00 · 2024-01-15 15:42:28 -08:00
parent b0e1614aac
commit 2a759144d6
11 changed files with 46 additions and 62 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src-web/components/EnvironmentEditDialog.tsx
+++ b/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"
--- a/src-web/components/RecentResponsesDropdown.tsx
+++ b/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"
--- a/src-web/components/SettingsDropdown.tsx
+++ b/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',
--- a/src-web/components/Sidebar.tsx
+++ b/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 },
--- a/src-web/components/UrlBar.tsx
+++ b/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"
          />
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/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];
--- a/src-web/components/core/Icon.tsx
+++ b/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,
-  chat: I.ChatBubbleIcon,
-  check: I.CheckIcon,
-  checkbox: I.CheckboxIcon,
-  chevronDown: I.ChevronDownIcon,
-  chevronRight: I.ChevronRightIcon,
-  clock: I.ClockIcon,
-  code: I.CodeIcon,
-  colorWheel: I.ColorWheelIcon,
-  copy: I.CopyIcon,
-  dividerH: I.DividerHorizontalIcon,
-  dotsH: I.DotsHorizontalIcon,
-  dotsV: I.DotsVerticalIcon,
-  download: I.DownloadIcon,
-  drag: I.DragHandleDots2Icon,
-  eye: I.EyeOpenIcon,
-  eyeClosed: I.EyeClosedIcon,
-  gear: I.GearIcon,
-  hamburger: I.HamburgerMenuIcon,
-  home: I.HomeIcon,
-  keyboard: I.KeyboardIcon,
-  listBullet: I.ListBulletIcon,
-  magicWand: I.MagicWandIcon,
-  magnifyingGlass: I.MagnifyingGlassIcon,
-  minus: I.MinusIcon,
-  moon: I.MoonIcon,
-  openNewWindow: I.OpenInNewWindowIcon,
-  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,
+  archive: lucide.ArchiveIcon,
+  chat: lucide.MessageSquare,
+  check: lucide.CheckIcon,
+  chevronDown: lucide.ChevronDownIcon,
+  chevronRight: lucide.ChevronRightIcon,
+  code: lucide.CodeIcon,
+  copy: lucide.CopyIcon,
+  moreVertical: lucide.MoreVerticalIcon,
+  download: lucide.DownloadIcon,
+  gripVertical: lucide.GripVerticalIcon,
+  eye: lucide.EyeIcon,
+  eyeClosed: lucide.EyeOffIcon,
+  filter: lucide.FilterIcon,
+  flask: lucide.FlaskConicalIcon,
+  gear: lucide.CogIcon,
+  keyboard: lucide.KeyboardIcon,
+  magicWand: lucide.Wand2Icon,
+  externalLink: lucide.ExternalLinkIcon,
+  sendHorizontal: lucide.SendHorizonalIcon,
+  pencil: lucide.PencilIcon,
+  question: lucide.ShieldQuestionIcon,
+  plus: lucide.PlusIcon,
+  plusCircle: lucide.PlusCircleIcon,
+  trash: lucide.TrashIcon,
+  update: lucide.RefreshCcwIcon,
+  upload: lucide.UploadIcon,
+  x: lucide.XIcon,

  // Custom
  leftPanelHidden: LeftPanelHiddenIcon,
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/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')}
                      />
                    }
--- a/src-web/components/responseViewers/TextViewer.tsx
+++ b/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}
      />