refactor: migrate web icons to @makeplane/propel - #9731
Merged
Conversation
Replace confirmed icon symbols across apps/web with their audited @makeplane/propel/icons targets. Unresolved symbols and the State, Priority and Brand icons stay on their existing imports. Lucide size props become explicit width/height, including the two relation icons and the inbox status icon that forward a size variable. Two aliased imports resolve to targets the file already imported, so the aliases are dropped rather than importing the same symbol twice. Widen the member dropdown chain and the AI menu from LucideIcon to ComponentType<SVGProps<SVGSVGElement>> so both Lucide and Propel icons satisfy them; both only ever render the icon with a className. CycleGroupIcon is deliberately not migrated: it dispatches a different glyph and color per cycle status, which CyclesOutline cannot express. apps/web already declared @makeplane/propel, so no dependency change was needed.
Contributor
|
Important Review skippedToo many files! This PR contains 470 files, which is 170 over the limit of 300. To get a review, reduce the PR to 300 files or fewer by splitting it into smaller PRs or changing its base branch. Usage-priced reviews support at most 300 files. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (470)
You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
React Doctor found 66 new issues in 55 files · 66 warnings · score 69 / 100 (Needs work) · 177 fixed · vs 66 warnings
16 more warnings not shown. Reviewed by React Doctor for commit |
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors apps/web to migrate audit-confirmed icon usages from the existing Lucide / @plane/propel/icons imports to @makeplane/propel/icons, aligning the web app with the ongoing community icon migration while leaving unresolved symbol groups (State/Priority/Brand, CycleGroupIcon) untouched.
Changes:
- Updated icon imports/usages across
apps/webto use@makeplane/propel/iconsoutline icons where mappings are known. - Replaced Lucide
sizeusages with explicitwidth/heightin select call sites to preserve sizing behavior. - Broadened a few icon-accepting types (e.g., member dropdown chain) to allow
ComponentType<SVGProps<SVGSVGElement>>where needed.
Reviewed changes
Copilot reviewed 300 out of 470 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/core/components/exporter/column.tsx | Migrates download icon to DownloadOutline (note: currently also changes visible text/key to “DownloadOutline”). |
| apps/web/core/components/home/widgets/links/action.tsx | Migrates “add link” icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/quick-add/root.tsx | Migrates quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx | Migrates list quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx | Migrates spreadsheet quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx | Migrates kanban quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx | Migrates gantt quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx | Migrates calendar quick-add icon to AddOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/cycles/list/cycles-list-item.tsx | Migrates completed check icon to TickOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx | Migrates close chevron to ChevronRightOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/core/components/modules/analytics-sidebar/root.tsx | Migrates close chevron to ChevronRightOutline (note: contains text-2 class likely meant to be stroke-2). |
| apps/web/helpers/views.helper.ts | Migrates view-access icons to GlobeOutline / LockOutline. |
| apps/web/core/layouts/auth-layout/workspace-wrapper.tsx | Replaces Lucide logout icon with LogOutOutline and uses explicit width/height. |
| apps/web/core/components/workspace/views/header.tsx | Replaces PlusIcon with AddOutline in global views header. |
| apps/web/core/components/workspace/sidebar/quick-actions.tsx | Replaces AddWorkItemIcon with AddWorkItemOutline in sidebar quick action. |
| apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx | Replaces Lucide download icon with DownloadOutline. |
| apps/web/core/components/issues/issue-update-status.tsx | Replaces Lucide refresh icon with RefreshOutline for saving indicator. |
| apps/web/core/components/common/activity/activity-block.tsx | Replaces Lucide network icon with HierarchyOutline fallback. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| onClick={() => handleClose()} | ||
| > | ||
| <ChevronRightIcon className="size-4 stroke-2 text-secondary" /> | ||
| <ChevronRightOutline className="text-2 size-4 text-secondary" /> |
| <div className="pointer-events-none absolute inset-0 flex items-center justify-center"> | ||
| {progress === 100 ? ( | ||
| <CheckIcon className="h-3 w-3 stroke-2" /> | ||
| <TickOutline className="text-2 h-3 w-3" /> |
Comment on lines
96
to
98
| key: "DownloadOutline", | ||
| content: "DownloadOutline", | ||
| tdRender: (rowData: RowData) => |
| > | ||
| <div className="my-auto h-8 w-8 rounded-sm bg-layer-1/40 p-2"> | ||
| <PlusIcon className="h-4 w-4 stroke-2 text-tertiary" /> | ||
| <AddOutline className="text-2 h-4 w-4 text-tertiary" /> |
| customButton={ | ||
| <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-tertiary hover:text-tertiary"> | ||
| <PlusIcon className="h-3.5 w-3.5 flex-shrink-0 stroke-2" /> | ||
| <AddOutline className="text-2 h-3.5 w-3.5 flex-shrink-0" /> |
| onClick={onClick} | ||
| > | ||
| <PlusIcon className="h-3.5 w-3.5 stroke-2" /> | ||
| <AddOutline className="text-2 h-3.5 w-3.5" /> |
| onClick={onClick} | ||
| > | ||
| <PlusIcon className="h-3.5 w-3.5 stroke-2" /> | ||
| <AddOutline className="text-2 h-3.5 w-3.5" /> |
| onClick={onClick} | ||
| > | ||
| <PlusIcon className="h-3.5 w-3.5 stroke-2" /> | ||
| <AddOutline className="text-2 h-3.5 w-3.5" /> |
| onClick={() => handleIsOpen(true)} | ||
| > | ||
| <PlusIcon className="h-3.5 w-3.5 stroke-2" /> | ||
| <AddOutline className="text-2 h-3.5 w-3.5" /> |
| onClick={() => handleClose()} | ||
| > | ||
| <ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" /> | ||
| <ChevronRightOutline className="text-2 h-3 w-3 text-on-color" /> |
anmolsinghbhatia
marked this pull request as draft
September 1, 2026 14:34
codingwolf-at
left a comment
codingwolf-at
left a comment
Contributor
There was a problem hiding this comment.
Identifier replace leaked into user-facing copy (DownloadOutline / SettingsOutline / PinOutline / StarOutline us on GitHub), stroke-2 became text-2, favorited stars went hollow, and strokeWidth is a no-op on fill-based Propel glyphs.
Restore the six user-facing strings the identifier rename overwrote. The migration replaced every occurrence of a source symbol name, including ones inside string literals and JSX text, so the GitHub empty state read "StarOutline us on GitHub", the exporter column key, header and button label became "DownloadOutline", the project card action title became "SettingsOutline" and a tooltip became "PinOutline". Drop 122 strokeWidth props and 10 text-2 classes. Propel glyphs paint with fill="currentColor", so strokeWidth never changed weight, and text-2 was a bad conversion of stroke-2, which is a stroke width rather than a colour and has no meaning on a fill path. Use StarFilled for the two favorited sidebar stars. Lucide's Star with fill-yellow-500 was a solid star, and StarOutline is a ring path, so filling it does not reproduce that shape.
anmolsinghbhatia
marked this pull request as ready for review
September 2, 2026 08:31
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -33,7 +33,7 @@ export const CycleFiltersSelection = observer(function CycleFiltersSelection(pro | |||
| <div className="flex h-full w-full flex-col overflow-hidden"> | |||
| <div className="bg-surface-1 p-2.5 pb-0"> | |||
There was a problem hiding this comment.
React Doctor · react-doctor/duplicate-jsx-subtree (warning)
5 copies of this 6-node JSX tree appear across 5 files, repeating about 72 lines. Composition path: CycleFiltersSelection > div > div.
Fix → Consider extracting a shared component if these trees represent the same UI concept. Keep them separate when the resemblance is incidental or the variants are likely to evolve independently.
|
|
||
| export function LockedComponent(props: { toolTipContent?: string }) { | ||
| const { toolTipContent } = props; | ||
| const lockedComponent = ( |
There was a problem hiding this comment.
React Doctor · react-doctor/rendering-hoist-jsx (warning)
This rebuilds on every render because static JSX "lockedComponent" is built inside the component, so move it to the top of the file to make it just once
Fix → Move the static JSX out to the top of the file: const ICON = <svg>...</svg>, so it isn't rebuilt on every render
| <LoadingOutline className="spin h-3.5 w-3.5" /> | ||
| ) : canCreateLabel ? ( | ||
| <ul className="space-y-1"> | ||
| <Combobox.Option |
There was a problem hiding this comment.
React Doctor · react-doctor/click-events-have-key-events (warning)
Keyboard users can't trigger this click handler because there's no keyboard one, so add onKeyUp, onKeyDown, or onKeyPress.
Fix → Pair onClick with a key handler so keyboard users can trigger it.
| <LoadingOutline className="spin h-3.5 w-3.5" /> | ||
| ) : canCreateLabel ? ( | ||
| <ul className="space-y-1"> | ||
| <Combobox.Option |
There was a problem hiding this comment.
React Doctor · react-doctor/no-noninteractive-element-interactions (warning)
Keyboard & screen reader users can't trigger this <li> because it isn't interactive, so use a button or link or add an interactive role.
Fix → Put interactions on a button or link, or add an interactive role.
| @@ -22,9 +22,9 @@ export function ModuleLayoutIcon(props: ILayoutIcon) { | |||
|
|
|||
| // get Layout icon | |||
| const icons = { | |||
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-static-value (warning)
icons inside ModuleLayoutIcon uses no local state but is rebuilt every render, so it looks new each time & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the value above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted and makes it look new every time.
codingwolf-at
approved these changes
Sep 2, 2026
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.
Description
Migrates the audit-confirmed icon symbols in
apps/web(470 files) to@makeplane/propel/icons— the largest scope of this migration.apps/webalready declared the dependency.Unresolved symbols, including all State, Priority and Brand icons, stay on their existing imports.
Lucide
sizebecame explicitwidth/height, including three sites that forward a size variable; the member dropdown chain and pages AI menu widen fromLucideIcontoComponentType<SVGProps<SVGSVGElement>>so generated Propel icons satisfy them.CycleGroupIcon(6 files) is not migrated: it dispatches a different glyph and colour per cycle status, whichCyclesOutlinecannot express.Icon mapping (150 rows)
UserActivityIconActivityOutlineListFilterPlusAddFilterOutlineCreateIcon,PlusIconAddOutlineAddWorkItemIconAddWorkItemOutlineSparkle,SparklesAiStar1OutlineAlertOctagon,OctagonAlertAlertOctagonOutlineAlignLeftAlignLeftOutlineAnalyticsIconAnalyticsOutlineArchiveIconArchiveOutlineMinimize2,ShrinkArrowCollapseOutlineArrowDownArrowDownOutlineArrowLeft,MoveLeftArrowNarrowLeftOutlineArrowRight,MoveRightArrowNarrowRightOutlineAtSignAtOutlinePaperclip,PaperclipIconAttachOutlineArchiveXAutoCloseOutlineBarChart2,BarChart4,ChartNoAxesColumnBarOutlineCreditCardBillingsOutlineCircleDotBlockingOutlineBoardLayoutIconBoardOutlineBoxesBoxesOutlineBuildingBuildingOutlineCalendar,CalendarDays,CalendarLayoutIconCalendarOutlineMessageCircle,MessageSquare,MessageSquareIconChatOutlineCheckCheckCheckDoneOutlineChevronDownIconChevronDownOutlineChevronLeftIconChevronLeftOutlineChevronRightIconChevronRightOutlineChevronUpIconChevronUpOutlineClipboardClipboardOutlineClockClockOutlineCloseCircleFilledIconCloseCircleFilledCircleX,XCircleCloseCircleOutlineCloseIcon,XCloseOutlineCalendarCheckCompletedAtOutlineCopyIconCopyOutlineCornerDownRightCornerRightDownOutlineFolderPlusCreateFolderOutlineBoxCubeOutlineContrastIcon,CycleIconCyclesOutlineDashboardIconDashboardsOutlineSuspendedUserIconDeactivatedUserOutlineSetAsDefaultIconDefaultTabOutlineTrash2,TrashIconDeleteOutlineFileTextDocumentationOutlineDownloadDownloadOutlineDraftIconDraftsOutlineGripVertical,MoveDiagonalDragDropOutlineDueDatePropertyIconDueDateOutlineCopyPlus,DuplicatePropertyIcon,FileStackDuplicateOfOutlineEditIcon,PenSquare,PencilEditOutlineEpicIconEpicOutlineEstimatePropertyIconEstimateOutlineArrowUpToLine,FileOutputExportOutlineFilterIcon,ListFilterFilterOutlineFolderFolderOutlineExpand,Maximize2FullScreenOutlineFullScreenPanelIconFullScreenPeekOutlineGitBranchGitBranchOutlineGithubIconGithubEarth,GlobeIconGlobeOutlineGridLayoutIcon,LayoutGrid,LayoutGridIconGridOutlineComponentGroupOutlineHashHashOutlineHelpCircleHelpOutlineEyeOffHideOutlineNetworkHierarchyOutlineHistoryHistoryOutlineHome,HomeIconHomeOutlineImageIconImageOutlineInbox,InboxIconInboxOutlineInfoFillIconInfoFilledInfo,InfoIconInfoOutlineIntake,IntakeIconIntakeOutlineKeyRoundKeyOutlineLabelFilledIconLabelsFilledLabelPropertyIcon,TagIconLabelsOutlinePanelLeftLeftSidePaneOutlineCopyLinkIcon,Link,Link2Icon,LinkIconLinkOutlineListLayoutIconListOutlineLoaderLoadingOutlineLockKeyholeLockedOutlineLockIconLockOutlineLogOutLogOutOutlineMail,MailsMailOutlineMembersPropertyIcon,Users,Users2Icon,UsersIconMembersOutlineMinusMinusOutlineCenterPanelIconModalPeekOutlineDiceIcon,ModuleIconModuleOutlineMonitorMonitorOutlineEllipsis,MoreHorizontalMoreHorizontalOutlineMoreVertical,MoreVerticalIconMoreVerticalOutlineMultipleStickyIcon,RecentStickyIconMultipleStickyOutlineExternalLink,NewTabIconNewTabOutlinePageIconPagesOutlinePalettePaletteOutlineParentPropertyIconParentOutlinePinPinOutlineCirclePlusPlusCircleOutlinePreferencesIcon,SlidersHorizontalPreferencesOutlinePriorityPropertyIconPriorityOutlineBriefcase,Hotel,ProjectIconProjectsOutlineSmilePlusReactionOutlineRefreshCcw,RefreshCw,RotateCcwRefreshOutlineRelatedIconRelatesToOutlineRelationPropertyIconRelationsOutlineCommentReplyIconReplyOutlineArchiveRestore,ArchiveRestoreIconRestoreOutlinePanelRightRightSidePaneOutlineRocketRocketOutlineSearchIconSearchOutlineFilterAppliedIconSelectedFilterOutlineSettings,Settings2,SettingsIconSettingsOutlineShare2ShareAltOutlineEye,EyeIconShowOutlineSidePanelIconSidePeekOutlineArrowUpNarrowWide,ArrowUpWideNarrowSortAscendingOutlineArrowDownWideNarrowSortDescendingOutlineStarStarOutlineStartDatePropertyIconStartDateOutlineDoubleCircleIcon,StatePropertyIconStateOutlineStickyNote,StickyNoteIconStickyNoteOutlineBellSubscribeOutlineSheetLayoutIconTableOutlineALargeSmall,TypeTextOutlineLightbulbThoughtsOutlineCheckCircleFilledIconTickCircleFilledCheckCircle,CheckCircle2,CircleCheckTickCircleOutlineCheckIconTickOutlineTimelineLayoutIconTimelineOutlineTimerTimeTrackingOutlineListTodoToDoOutlineArrowUpTopArrowOutlineTransferIconTransferWorkItemOutlineZapTriggerOutlineLockKeyholeOpenUnlockedOutlinePinOffUnpinOutlineBellOffUnsubscribeOutlineUploadCloudUploadOutlineSquareUserUserAltOutlineUserMinus2UserMinusOutlineCircleUser,CircleUserRound,User,User2,UserCirclePropertyIcon,UserRoundUserOutlineUserPlus,UserPlus2UserPlusOutlineViewsIconViewsOutlineAlertCircle,CircleAlertWarningCircleOutlineAlertTriangle,AlertTriangleIcon,TriangleAlertWarningTriangleOutlineWebhookWebhooksOutlineShapesWidgetOutlineLayers,LayersIcon,WorkItemsIconWorkItemsOutlineYourWorkIconYourWorkOutlineType of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Part of the community icon migration to
@makeplane/propel/icons. Mappings come from the icon audit manifest; none were inferred by name or appearance.🤖 Generated with Claude Code