refactor: migrate web icons to @makeplane/propel

apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { CycleIcon } from "@plane/propel/icons";
+import { CyclesOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -24,7 +24,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
             component={
               <BreadcrumbLink
                 label={t("active_cycles")}
-                icon={<CycleIcon className="h-4 w-4 rotate-180 text-tertiary" />}
+                icon={<CyclesOutline className="h-4 w-4 rotate-180 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { AnalyticsIcon } from "@plane/propel/icons";
+import { AnalyticsOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -22,7 +22,7 @@ export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHead
             component={
               <BreadcrumbLink
                 label={t("workspace_analytics.label")}
-                icon={<AnalyticsIcon className="h-4 w-4 text-tertiary" />}
+                icon={<AnalyticsOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane ui
-import { WorkItemsIcon } from "@plane/propel/icons";
+import { WorkItemsOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -46,7 +46,7 @@ export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
               <BreadcrumbLink
                 label="Work Items"
                 href={`/${workspaceSlug}/projects/${projectId}/issues/`}
-                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
+                icon={<WorkItemsOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -10,7 +10,7 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
-import { DraftIcon } from "@plane/propel/icons";
+import { DraftsOutline } from "@makeplane/propel/icons";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -52,7 +52,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-tertiary" />} />
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftsOutline className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -11,7 +11,7 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { PlusIcon, SearchIcon } from "@plane/propel/icons";
+import { AddOutline, SearchOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@@ -123,13 +123,13 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
                     setIsProjectModalOpen(true);
                   }}
                 >
-                  <PlusIcon className="size-3" />
+                  <AddOutline className="size-3" />
                 </button>
               </Tooltip>
             )}
           </div>
           <div className="ml-auto flex w-full items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1">
-            <SearchIcon className="h-3.5 w-3.5 text-placeholder" />
+            <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
               placeholder={t("search")}

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -5,11 +5,10 @@
  */
 
 import { observer } from "mobx-react";
-import { Shapes } from "lucide-react";
+import { HomeOutline, WidgetOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { HomeIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -30,7 +29,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("home.title")} icon={<HomeIcon className="h-4 w-4 text-tertiary" />} />
+                  <BreadcrumbLink label={t("home.title")} icon={<HomeOutline className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>
@@ -42,7 +41,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
             size="lg"
             onClick={() => toggleWidgetSettings(true)}
             className="my-auto mb-0"
-            prependIcon={<Shapes />}
+            prependIcon={<WidgetOutline />}
           >
             <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
           </Button>

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx

@@ -7,10 +7,9 @@
 // ui
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { PanelRight } from "lucide-react";
+import { ChevronDownOutline, RightSidePaneOutline, YourWorkOutline } from "@makeplane/propel/icons";
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
 // components
@@ -62,7 +61,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
               <BreadcrumbLink
                 label={breadcrumbLabel}
                 disableTooltip
-                icon={<YourWorkIcon className="h-4 w-4 text-tertiary" />}
+                icon={<YourWorkOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -78,7 +77,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             customButton={
               <div className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1.5">
                 <span className="flex flex-grow justify-center text-13 text-secondary">{type}</span>
-                <ChevronDownIcon className="h-4 w-4 text-placeholder" />
+                <ChevronDownOutline className="h-4 w-4 text-placeholder" />
               </div>
             }
             customButtonClassName="flex flex-grow justify-center text-secondary text-13"
@@ -103,7 +102,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
                 toggleProfileSidebar();
               }}
               appendIcon={
-                <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+                <RightSidePaneOutline className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
               }
             ></Button>
           </div>

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx

@@ -12,7 +12,7 @@ import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "
 // plane i18n
 import { useTranslation } from "@plane/i18n";
 // icons
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
 // types
 import type {
   IIssueDisplayFilterOptions,
@@ -92,7 +92,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
         customButton={
           <div className="flex-center flex text-13 text-secondary">
             {t("common.layout")}
-            <ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
+            <ChevronDownOutline className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
           </div>
         }
         customButtonClassName="flex flex-center text-secondary text-13"
@@ -121,7 +121,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
           menuButton={
             <div className="flex-center flex text-13 text-secondary">
               {t("common.display")}
-              <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
+              <ChevronDownOutline className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
             </div>
           }
         >

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { ArchiveOutline, CyclesOutline, ModuleOutline, WorkItemsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 // ui
@@ -35,17 +35,17 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
   issues: {
     label: "Work items",
     href: "/issues",
-    icon: WorkItemsIcon,
+    icon: WorkItemsOutline,
   },
   cycles: {
     label: "Cycles",
     href: "/cycles",
-    icon: CycleIcon,
+    icon: CyclesOutline,
   },
   modules: {
     label: "Modules",
     href: "/modules",
-    icon: ModuleIcon,
+    icon: ModuleOutline,
   },
 };
 
@@ -78,7 +78,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                   label="Archives"
-                  icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
+                  icon={<ArchiveOutline className="h-4 w-4 text-tertiary" />}
                 />
               }
             />

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx

@@ -10,7 +10,7 @@ import useSWR from "swr";
 // ui
 import { Banner } from "@plane/propel/banner";
 import { Button } from "@plane/propel/button";
-import { ArchiveIcon } from "@plane/propel/icons";
+import { ArchiveOutline } from "@makeplane/propel/icons";
 import { Loader } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core/page-title";
@@ -70,7 +70,7 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
           <Banner
             variant="warning"
             title="This work item has been archived. Visit the Archives section to restore it."
-            icon={<ArchiveIcon className="size-4" />}
+            icon={<ArchiveOutline className="size-4" />}
             action={
               <Button
                 variant="secondary"

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx

@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { ArchiveIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { ArchiveOutline, WorkItemsOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -47,7 +47,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                 label="Archives"
-                icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
+                icon={<ArchiveOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -56,7 +56,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchiv
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                 label="Work items"
-                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
+                icon={<WorkItemsOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -8,7 +8,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ChartNoAxesColumn, PanelRight, SlidersHorizontal } from "lucide-react";
+import { BarOutline, CyclesOutline, PreferencesOutline, RightSidePaneOutline } from "@makeplane/propel/icons";
 // plane imports
 import {
   EIssueFilterType,
@@ -20,7 +20,6 @@ import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { IconButton } from "@plane/propel/icon-button";
-import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
@@ -118,7 +117,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
       return {
         value: _cycle.id,
         query: _cycle.name,
-        content: <SwitcherLabel name={_cycle.name} LabelIcon={CycleIcon} />,
+        content: <SwitcherLabel name={_cycle.name} LabelIcon={CyclesOutline} />,
       };
     })
     .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@@ -143,7 +142,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                   <BreadcrumbLink
                     label="Cycles"
                     href={`/${workspaceSlug}/projects/${projectId}/cycles/`}
-                    icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
+                    icon={<CyclesOutline className="h-4 w-4 text-tertiary" />}
                   />
                 }
               />
@@ -158,7 +157,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                     title={cycleDetails?.name}
                     icon={
                       <Breadcrumbs.Icon>
-                        <CycleIcon className="size-4 flex-shrink-0 text-tertiary" />
+                        <CyclesOutline className="size-4 flex-shrink-0 text-tertiary" />
                       </Breadcrumbs.Icon>
                     }
                     isLast
@@ -213,7 +212,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
             <FiltersDropdown
               title={t("common.display")}
               placement="bottom-end"
-              miniIcon={<SlidersHorizontal className="size-3.5" />}
+              miniIcon={<PreferencesOutline className="size-3.5" />}
             >
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
@@ -234,7 +233,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
                 <Button onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
                   <span className="hidden @4xl:flex">Analytics</span>
                   <span className="@4xl:hidden">
-                    <ChartNoAxesColumn className="size-3.5" />
+                    <BarOutline className="size-3.5" />
                   </span>
                 </Button>
                 {!isCompletedCycle && (
@@ -253,7 +252,7 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
             <IconButton
               variant="tertiary"
               size="lg"
-              icon={PanelRight}
+              icon={RightSidePaneOutline}
               onClick={toggleSidebar}
               className={cn({
                 "bg-accent-subtle text-accent-primary": !isSidebarCollapsed,

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx

@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { BoardOutline, CalendarOutline, ChevronDownOutline, ListOutline } from "@makeplane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -24,9 +24,9 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
 const SUPPORTED_LAYOUTS = [
-  { key: "list", titleTranslationKey: "issue.layouts.list", icon: ListLayoutIcon },
-  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: BoardLayoutIcon },
-  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarLayoutIcon },
+  { key: "list", titleTranslationKey: "issue.layouts.list", icon: ListOutline },
+  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: BoardOutline },
+  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarOutline },
 ];
 
 export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader() {
@@ -127,7 +127,7 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
             menuButton={
               <span className="flex items-center text-13 text-secondary">
                 {t("common.display")}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" />
+                <ChevronDownOutline className="ml-2 h-4 w-4 text-secondary" />
               </span>
             }
           >

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx

@@ -10,7 +10,7 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { CycleIcon } from "@plane/propel/icons";
+import { CyclesOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -49,7 +49,7 @@ export const CyclesListHeader = observer(function CyclesListHeader() {
               <BreadcrumbLink
                 label="Cycles"
                 href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/cycles/`}
-                icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
+                icon={<CyclesOutline className="h-4 w-4 text-tertiary" />}
                 isLast
               />
             }