chore: icon revamp and refactor (#2447)

* chore: svg icons added in plane/ui package

* chore: swap priority and state icon with plane/ui icons

* chore: replace core folder icons with lucide and plane ui icons

* style: priority icon size

* chore: replace icons with lucide and plane/ui icons

* chore: replace cycle folder icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* chore: replace existing icons with lucide and plane/ui icons

* fix: build error

* fix: build error

* fix: build error

web/components/issues/sidebar-select/blocked.tsx

@@ -11,8 +11,8 @@ import { IssueService } from "services/issue";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon } from "components/icons";
+import { X } from "lucide-react";
+import { BlockedIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -139,7 +139,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges,
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))

web/components/issues/sidebar-select/blocker.tsx

@@ -12,8 +12,8 @@ import { ExistingIssuesListModal } from "components/core";
 // services
 import { IssueService } from "services/issue";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon } from "components/icons";
+import { X } from "lucide-react";
+import { BlockerIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -149,7 +149,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges,
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))

web/components/issues/sidebar-select/duplicate.tsx

@@ -9,7 +9,7 @@ import useUser from "hooks/use-user";
 // icons
 import { X, CopyPlus } from "lucide-react";
 // components
-import { BlockerIcon } from "components/icons";
+import { BlockerIcon } from "@plane/ui";
 import { ExistingIssuesListModal } from "components/core";
 // services
 import { IssueService } from "services/issue";

web/components/issues/sidebar-select/estimate.tsx

@@ -5,7 +5,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 
 type Props = {
   value: number | null;
@@ -21,11 +21,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
       value={value}
       customButton={
         <div className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5">
-          <PlayIcon
-            className={`h-4 w-4 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
+          <Triangle className={`h-4 w-4 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
           {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
         </div>
       }
@@ -35,7 +31,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-4 w-4" />
           </span>
           None
         </>
@@ -45,7 +41,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
+                <Triangle className="h-4 w-4" />
               </span>
               {point.value}
             </>

web/components/issues/sidebar-select/label.tsx

@@ -12,7 +12,7 @@ import useUser from "hooks/use-user";
 // ui
 import { Input, Spinner } from "@plane/ui";
 // icons
-import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Component, Plus, Tag, X } from "lucide-react";
 // types
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
@@ -94,7 +94,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
     <div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
       <div className="flex items-start justify-between">
         <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
-          <TagIcon className="h-4 w-4" />
+          <Tag className="h-4 w-4" />
           <p>Label</p>
         </div>
         <div className="basis-1/2">
@@ -121,7 +121,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                       }}
                     />
                     {label.name}
-                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                    <X className="h-2 w-2 group-hover:text-red-500" />
                   </span>
                 );
             })}
@@ -188,7 +188,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                                     return (
                                       <div className="border-y border-custom-border-100 bg-custom-background-90">
                                         <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
-                                          <RectangleGroupIcon className="h-3 w-3" />
+                                          <Component className="h-3 w-3" />
                                           {label.name}
                                         </div>
                                         <div>
@@ -240,11 +240,11 @@ export const SidebarLabelSelect: React.FC<Props> = ({
               >
                 {createLabelForm ? (
                   <>
-                    <XMarkIcon className="h-3 w-3" /> Cancel
+                    <X className="h-3 w-3" /> Cancel
                   </>
                 ) : (
                   <>
-                    <PlusIcon className="h-3 w-3" /> New
+                    <Plus className="h-3 w-3" /> New
                   </>
                 )}
               </button>
@@ -317,10 +317,10 @@ export const SidebarLabelSelect: React.FC<Props> = ({
             className="grid place-items-center rounded bg-red-500 p-2.5"
             onClick={() => setCreateLabelForm(false)}
           >
-            <XMarkIcon className="h-4 w-4 text-white" />
+            <X className="h-4 w-4 text-white" />
           </button>
           <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
-            <PlusIcon className="h-4 w-4 text-white" />
+            <Plus className="h-4 w-4 text-white" />
           </button>
         </form>
       )}

web/components/issues/sidebar-select/priority.tsx

@@ -3,7 +3,7 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
@@ -32,7 +32,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
         }`}
       >
         <span className="grid place-items-center -my-1">
-          <PriorityIcon priority={value} className="!text-sm" />
+          <PriorityIcon priority={value} className="h-3.5 w-3.5" />
         </span>
         <span>{value ?? "None"}</span>
       </div>
@@ -45,7 +45,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
     {PRIORITIES.map((option) => (
       <CustomSelect.Option key={option} value={option} className="capitalize">
         <>
-          <PriorityIcon priority={option} className="text-sm" />
+          <PriorityIcon priority={option} className="h-3.5 w-3.5" />
           {option ?? "None"}
         </>
       </CustomSelect.Option>

web/components/issues/sidebar-select/relates-to.tsx

@@ -8,7 +8,7 @@ import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
 import { X } from "lucide-react";
-import { BlockerIcon, RelatedIcon } from "components/icons";
+import { BlockerIcon, RelatedIcon } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services

web/components/issues/sidebar-select/state.tsx

@@ -8,9 +8,7 @@ import useSWR from "swr";
 import { ProjectStateService } from "services/project";
 // ui
 import { CustomSelect } from "components/ui";
-import { Spinner } from "@plane/ui";
-// icons
-import { StateGroupIcon } from "components/icons";
+import { Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";