Repository navigation
chore(deps): upgrade lucide-react to 1.51.0 - #14
Merged
Merged
Conversation
lucide-react 1.x sets aria-hidden on every icon unless it gets an aria-*, role or title prop. Six bare icons act as click targets (remove-badge X and copy icons); without a label they are now hidden from assistive technology entirely, so they get an aria-label. No imported icon was removed in 1.x: every name, including the old aliases, still resolves, and none of the removed brand icons is used. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
lucide-react^0.469.0→^1.51.0inapps/dokploy(the only workspace that depends on it). 1.51.0 is the newest release older than 3 days.aria-labeladded to six bare lucide icons that are themselves click targets (no wrapping button):handle-domain.tsx:Xthat removes a middleware badge →Remove <name>show-preview-settings.tsx:Xthat removes a label badge →Remove <label>restore-backup.tsx,restore-volume-backups.tsx:Copyon the selected backup file →Copy backup filerequests-table.tsx:Copynext toRequestAddr→Copy request addressweb-server.tsx:CopyIconnext to the server IP →Copy server IPWhat the release notes say and how it affects us
From the v1 announcement and the React migration guide:
aria-hidden="true"by default. Lucide drops it as soon as the icon gets anyaria-*,roleortitleprop, or children. An untitled SVG never gave its parent button an accessible name, so icon-only buttons are unchanged by this. The only real regression is a bare icon used as a click target: it was an unnamed clickable graphic before and is now hidden entirely, hence the six labels above. RadixasChildtriggers passaria-*props to the icon, so those keep working.lucide-react/...).Trash2,Loader2,AlertTriangle,HelpCircle,MoreHorizontal,PenBoxIcon,Building2,FileJson,Fingerprint,UploadCloud, ...). Aliases are not marked deprecated in the 1.x typings and render the same SVG as the canonical icon, so no imports were renamed. No icon was replaced (old → new: none).LucideIconhas the same shape (ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>).LucidePropsgainsnonScalingStrokeand deprecatesabsoluteStrokeWidth;IconNodeis deprecated in favour ofLucideIconNode. We only useLucideIcon(3 files) and none of the deprecated ones.Icons that look different on dev
Nothing was swapped in our code, but lucide redrew some icons between 0.469 and 1.51. I rendered every imported icon with both versions and compared the SVG markup. These ones changed (the number is how many files import that name):
TrashIcon(4): was the plain bin, now the same bin with two lines asTrash2, sincetrashandtrash-2were merged. Used inmanage-custom-roles.tsx,projects/show.tsx,advanced-environment-selector.tsx,save-drag-n-drop.tsx.Building2(1): now an alias ofBuildingComplex, redrawn as a wider building with a door (impersonation bar).Sparkles/Stars(3): new star shape; the small plus at the bottom left is now a circle.Key/KeyIcon(6): mirrored (the ring is now at the top right).CheckCircle2/CheckCircle2Icon/CircleCheckIcon(18): longer check mark.Settings(7): new gear outline.Play(5): rounded triangle.CreditCard(4): extra short stripe.Moon(1),Bookmark(1),Tags(2),Palette(3),MemoryStick(3),Cpu(6),Bug(1),Cog(1),GitBranch/GitBranchIcon(6),HardDrive(12),Hammer(2),Plug(1),Pause(1),CloudOff(2),ListTree(1),BlocksIcon(1): redrawn, same meaning.File,FileIcon,FileText,FilePlus,FilePlus2,FileInput,FileJson,FileTerminal.Trash2(53),Rocket/RocketIcon(15),Terminal(12),Ban(11),Clock(7),Download/DownloadIcon(11),Search/SearchIcon(7),Users/UsersIcon(8),Calendar/CalendarIcon(3),Mail(3),Upload(2),LogIn(4),LogOut(2),Settings2(2),ListTodo(1),List(1),CodeIcon(1),TrendingUpIcon(1),Forward(1),House(1),Package(3).Verification
bun run typecheck(all workspaces): passes.bunx biome checkon the changed files: clean.vitestwith__test__/vitest.config.ts, without*.real.test.ts: 2052 passed, 5 failed, 12 skipped. All 5 failures are timeouts in server-side tests that shell out to Docker or are slow locally (better-auth-schema-compat,db-backup-restore-injection,env-file-literals,remote-stream,cloud-queue-availability). No test importslucide-reactor renders UI.next buildnot run locally; CI builds it.Manual check on dev
TrashIcon(custom roles, projects list, environment selector, drag-and-drop upload), the impersonation bar (Building2,Key,CreditCard), the web server update dialog (Sparkles/Stars), and the key icons in API keys and servers.🤖 Generated with Claude Code