Migrate sidebar icons to Lucide React by kzuraw · Pull Request #5956 · saleor/saleor-dashboard

kzuraw · 2025-10-09T11:44:21Z

Summary

Replaces custom SVG icons in the sidebar with Lucide React equivalents for better consistency:

Replaced Cloud icon with CloudIcon from lucide-react
Replaced Graphql icon with new GraphqlIcon component (lucide-style)
Refactored TerminalIcon to match lucide-react conventions
Replaced Gift icon with GiftIcon from lucide-react
Added LucideIconsWrapper component for consistent icon sizing and styling

Test plan

Verify all sidebar icons render correctly
Check that icon sizing is consistent
Test keyboard shortcuts still work (Cmd/Ctrl + K, Cmd/Ctrl + ')
Verify "What's new" ripple modal opens correctly

🤖 Generated with Claude Code

Replace custom SVG icons with Lucide React equivalents in the sidebar: - Replace Cloud icon with CloudIcon from lucide-react - Replace Graphql icon with new GraphqlIcon component - Refactor TerminalIcon to match lucide-react style - Replace Gift icon with GiftIcon from lucide-react - Add LucideIconsWrapper component for consistent icon sizing and styling This change improves consistency across the dashboard by using a standard icon library instead of custom SVG components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

vercel · 2025-10-09T11:44:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
saleor-dashboard-storybook	Ignored	Preview		Oct 9, 2025 0:39am

changeset-bot · 2025-10-09T11:44:30Z

🦋 Changeset detected

Latest commit: 76809ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
saleor-dashboard	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull Request Overview

This PR migrates sidebar icons from custom SVG implementations to Lucide React icons for better consistency across the application. The migration includes replacing several custom icons with their Lucide equivalents and introducing a wrapper component to handle positioning adjustments.

Replaces custom Cloud, Graphql, and Gift icons with Lucide React equivalents
Refactors TerminalIcon to use arrow function syntax
Adds LucideIconsWrapper component for consistent icon positioning

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/icons/TerminalIcon.tsx	Refactored to use arrow function syntax matching Lucide conventions
src/icons/GraphqlIcon.tsx	New GraphQL icon component following Lucide styling patterns
src/icons/Graphql.tsx	Removed old custom GraphQL icon implementation
src/icons/Cloud.tsx	Removed old custom cloud icon implementation
src/components/Sidebar/shortcuts/useShortcuts.tsx	Updated to use new icon components and wrapper
src/components/Sidebar/menu/EnvironmentLink.tsx	Migrated to use CloudIcon from Lucide with wrapper
src/components/Sidebar/LucideIconsWrapper.tsx	New wrapper component for consistent icon positioning

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/icons/GraphqlIcon.tsx

src/components/Sidebar/LucideIconsWrapper.tsx

codecov · 2025-10-09T11:47:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 40.07%. Comparing base (dd82a2d) to head (76809ce).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##             main    #5956     +/-   ##
=========================================
  Coverage   40.06%   40.07%             
=========================================
  Files        2473     2473             
  Lines       40229    40234      +5     
  Branches     9185     9185             
=========================================
+ Hits        16119    16124      +5     
+ Misses      24083    22898   -1185     
- Partials       27     1212   +1185

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Fix viewBox in GraphqlIcon.tsx to use standard '0 0 24 24' format - Extract magic numbers to constants in LucideIconsWrapper.tsx for better maintainability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Copilot

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Wrap GraphqlIcon with LucideIconsWrapper for consistent positioning 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Adjust coordinates to better center the icon within the viewBox 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Copilot

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/components/Sidebar/shortcuts/useShortcuts.tsx

Copilot

Pull Request Overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot AI review requested due to automatic review settings October 9, 2025 11:44

Copilot AI reviewed Oct 9, 2025

View reviewed changes

src/icons/GraphqlIcon.tsx Show resolved Hide resolved

src/components/Sidebar/LucideIconsWrapper.tsx Outdated Show resolved Hide resolved

kzuraw and others added 2 commits October 9, 2025 13:47

Add changeset for sidebar icons migration

f8463b7

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings October 9, 2025 11:49

Copilot AI reviewed Oct 9, 2025

View reviewed changes

kzuraw requested a review from Copilot October 9, 2025 11:51

Copilot AI reviewed Oct 9, 2025

View reviewed changes

kzuraw marked this pull request as ready for review October 9, 2025 11:53

kzuraw requested a review from a team as a code owner October 9, 2025 11:53

kzuraw requested review from lkostrowski and witoszekdev October 9, 2025 11:53

kzuraw marked this pull request as draft October 9, 2025 11:54

kzuraw and others added 2 commits October 9, 2025 14:02

Fix GraphQL icon alignment in shortcuts

9a0256e

Wrap GraphqlIcon with LucideIconsWrapper for consistent positioning 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Center GraphQL icon properly in 24x24 viewBox

1c30854

Adjust coordinates to better center the icon within the viewBox 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings October 9, 2025 12:04

Copilot AI reviewed Oct 9, 2025

View reviewed changes

updates

bb059d6

kzuraw marked this pull request as ready for review October 9, 2025 12:08

Copilot AI review requested due to automatic review settings October 9, 2025 12:08

Copilot AI reviewed Oct 9, 2025

View reviewed changes

revert changes

efdbd69

witoszekdev previously approved these changes Oct 9, 2025

View reviewed changes

src/components/Sidebar/shortcuts/useShortcuts.tsx Outdated Show resolved Hide resolved

add marign left

76809ce

Copilot AI review requested due to automatic review settings October 9, 2025 12:39

kzuraw dismissed witoszekdev’s stale review via 76809ce October 9, 2025 12:39

witoszekdev approved these changes Oct 9, 2025

View reviewed changes

Copilot AI reviewed Oct 9, 2025

View reviewed changes

kzuraw merged commit 99a4948 into main Oct 9, 2025
19 checks passed

kzuraw deleted the migrate-sidebar-icons-to-lucide branch October 9, 2025 12:45

saleor-deployments bot mentioned this pull request Oct 10, 2025

Prepare release main #5960

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate sidebar icons to Lucide React#5956

Migrate sidebar icons to Lucide React#5956
kzuraw merged 8 commits intomainfrom
migrate-sidebar-icons-to-lucide

kzuraw commented Oct 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 9, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Oct 9, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Oct 9, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

kzuraw commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

vercel bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kzuraw commented Oct 9, 2025 •

edited

Loading

vercel bot commented Oct 9, 2025 •

edited

Loading

changeset-bot bot commented Oct 9, 2025 •

edited

Loading

codecov bot commented Oct 9, 2025 •

edited

Loading