Migrate sidebar icons to Lucide React

.changeset/migrate-sidebar-icons-to-lucide.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Migrated sidebar icons to Lucide React for better consistency. Replaced custom SVG icons (Cloud, Graphql, Gift) with Lucide equivalents and refactored TerminalIcon to match Lucide conventions.

src/components/Sidebar/LucideIconsWrapper.tsx

@@ -0,0 +1,15 @@
+import { Box } from "@saleor/macaw-ui-next";
+
+// Constants for Lucide icon transform offsets
+const LUCIDE_ICON_TRANSLATE_X = -3.5;
+const LUCIDE_ICON_TRANSLATE_Y = -2;
+
+export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => (
+  // Applying slight transform to center lucide icons vertically
+  // TODO: remove when we use lucide icons everywhere in sidebar
+  <Box
+    __transform={`translateX(${LUCIDE_ICON_TRANSLATE_X}px) translateY(${LUCIDE_ICON_TRANSLATE_Y}px)`}
+  >
+    {children}
+  </Box>
+);

src/components/Sidebar/menu/EnvironmentLink.tsx

@@ -1,7 +1,8 @@
-import { Cloud } from "@dashboard/icons/Cloud";
 import { Box, Text } from "@saleor/macaw-ui-next";
+import { CloudIcon } from "lucide-react";
 import { FormattedMessage } from "react-intl";
 
+import { LucideIconsWrapper } from "../LucideIconsWrapper";
 import { useEnvLink } from "./hooks/useEnvLink";
 
 export const EnvironmentLink = () => {
@@ -19,7 +20,9 @@ export const EnvironmentLink = () => {
       alignItems="center"
     >
       <Box __width={20} __height={20}>
-        <Cloud />
+        <LucideIconsWrapper>
+          <CloudIcon />
+        </LucideIconsWrapper>
       </Box>
       <Text size={3} fontWeight="medium" fontStyle="italic" color="default2">
         <FormattedMessage defaultMessage="Saleor Cloud" id="IF2KbT" />

src/components/Sidebar/shortcuts/useShortcuts.tsx

@@ -1,16 +1,16 @@
 import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
 import { useNavigatorSearchContext } from "@dashboard/components/NavigatorSearch/useNavigatorSearchContext";
-import { Graphql } from "@dashboard/icons/Graphql";
+import { GraphqlIcon } from "@dashboard/icons/GraphqlIcon";
 import { TerminalIcon } from "@dashboard/icons/TerminalIcon";
 import { Ripple } from "@dashboard/ripples/components/Ripple";
 import { rippleIntroducedRipples } from "@dashboard/ripples/ripples/introducedRipples";
 import { useAllRipplesModalState } from "@dashboard/ripples/state";
 import { Box } from "@saleor/macaw-ui-next";
-import { Gift } from "lucide-react";
+import { GiftIcon } from "lucide-react";
 import { useCallback, useMemo } from "react";
-import * as React from "react";
 import { useIntl } from "react-intl";
 
+import { LucideIconsWrapper } from "../LucideIconsWrapper";
 import { shortcutsMessages } from "./messages";
 import { getShortcutLeadingKey } from "./utils";
 
@@ -45,7 +45,7 @@ export const useShortcuts = (): Shortcut[] => {
         id: "search",
         name: intl.formatMessage(shortcutsMessages.search),
         icon: (
-          <Box __width="22px" __height="22px">
+          <Box __marginLeft={"-2px"}>
             <TerminalIcon />
           </Box>
         ),
@@ -55,7 +55,7 @@ export const useShortcuts = (): Shortcut[] => {
       {
         id: "playground",
         name: intl.formatMessage(shortcutsMessages.playground),
-        icon: <Graphql />,
+        icon: <GraphqlIcon />,
         shortcut: `${controlKey} + '`,
         action: handleOpenPlayground,
       },
@@ -69,7 +69,11 @@ export const useShortcuts = (): Shortcut[] => {
             </Box>
           </Box>
         ),
-        icon: <Gift />,
+        icon: (
+          <LucideIconsWrapper>
+            <GiftIcon />
+          </LucideIconsWrapper>
+        ),
         action: () => {
           setModalState(true);
         },

src/icons/GraphqlIcon.tsx

@@ -0,0 +1,21 @@
+export const GraphqlIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="2 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    data-macaw-ui-candidate
+  >
+    <path d="M12 3.5L4.5 8v8l7.5 4.5L19.5 16V8L12 3.5Z" />
+    <path d="M12 12l7.5-4.5M12 12v9M12 12L4.5 7.5" />
+    <circle cx="12" cy="3.5" r="1.5" />
+    <circle cx="4.5" cy="8" r="1.5" />
+    <circle cx="4.5" cy="16" r="1.5" />
+    <circle cx="12" cy="20.5" r="1.5" />
+    <circle cx="19.5" cy="16" r="1.5" />
+    <circle cx="19.5" cy="8" r="1.5" />
+  </svg>
+);

src/icons/TerminalIcon.tsx

@@ -1,16 +1,14 @@
-export const TerminalIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 19h8" />
-      <path d="m4 17 6-6-6-6" />
-    </svg>
-  );
-};
+export const TerminalIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 19h8" />
+    <path d="m4 17 6-6-6-6" />
+  </svg>
+);