chore: link icon migration

Author: anmolsinghbhatia

apps/space/core/components/issues/peek-overview/header.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { Link2, MoveRight } from "lucide-react";
+import { MoveRight } from "lucide-react";
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+import { LinkIcon , CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
@@ -117,7 +117,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
               className="focus:outline-none text-custom-text-300 hover:text-custom-text-200"
               tabIndex={1}
             >
-              <Link2 className="h-4 w-4 -rotate-45" />
+              <LinkIcon className="h-4 w-4 -rotate-45" />
             </button>
           </div>
         )}

apps/web/ce/components/issues/issue-layouts/utils.tsx

@@ -1,9 +1,10 @@
 import type { FC } from "react";
-import { CalendarDays, LayersIcon, Link2, Paperclip } from "lucide-react";
+import { CalendarDays, LayersIcon, Paperclip } from "lucide-react";
 // types
 import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
 import type { ISvgIcons } from "@plane/propel/icons";
 import {
+  LinkIcon,
   CycleIcon,
   StatePropertyIcon,
   ModuleIcon,
@@ -82,7 +83,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
   PriorityPropertyIcon: PriorityPropertyIcon,
   StartDatePropertyIcon: StartDatePropertyIcon,
   StatePropertyIcon: StatePropertyIcon,
-  Link2: Link2,
+  Link2: LinkIcon,
   Paperclip: Paperclip,
   LayersIcon: LayersIcon,
 };

apps/web/core/components/issues/peek-overview/header.tsx

@@ -2,11 +2,11 @@ import type { FC } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Link2, MoveDiagonal, MoveRight } from "lucide-react";
+import { MoveDiagonal, MoveRight } from "lucide-react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+import { LinkIcon , CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TNameDescriptionLoader } from "@plane/types";
@@ -227,7 +227,7 @@ export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader
           )}
           <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
             <button type="button" onClick={handleCopyText}>
-              <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
+              <LinkIcon className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
             </button>
           </Tooltip>
           {issueDetails && (

packages/propel/src/emoji-icon-picker/lucide-icons.tsx

@@ -117,8 +117,6 @@ import {
   Layers,
   Layout,
   LifeBuoy,
-  Link,
-  Link2,
   Linkedin,
   List,
   Loader,
@@ -288,7 +286,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Layout", element: Layout },
   { name: "LifeBuoy", element: LifeBuoy },
   { name: "Link", element: LinkIcon },
-  { name: "Link2", element: Link2 },
+  { name: "Link2", element: LinkIcon },
   { name: "Linkedin", element: Linkedin },
   { name: "List", element: List },
   { name: "Loader", element: Loader },

packages/ui/src/constants/icons.ts

@@ -117,7 +117,6 @@ import {
   Layers,
   Layout,
   LifeBuoy,
-  Link2,
   Linkedin,
   List,
   Loader,
@@ -893,7 +892,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Layout", element: Layout },
   { name: "LifeBuoy", element: LifeBuoy },
   { name: "Link", element: LinkIcon },
-  { name: "Link2", element: Link2 },
+  { name: "Link2", element: LinkIcon },
   { name: "Linkedin", element: Linkedin },
   { name: "List", element: List },
   { name: "Loader", element: Loader },

packages/utils/src/get-icon-for-link.ts

@@ -16,8 +16,8 @@ import {
   FileCode,
   Mail,
   Chrome,
-  Link2,
 } from "lucide-react";
+import { LinkIcon } from "@plane/propel/icons";
 
 type IconMatcher = {
   pattern: RegExp;
@@ -60,5 +60,5 @@ export const getIconForLink = (url: string) => {
   const allMatchers = [...SOCIAL_MEDIA_MATCHERS, ...PRODUCTIVITY_MATCHERS, ...FILE_TYPE_MATCHERS, ...OTHER_MATCHERS];
 
   const matchedIcon = allMatchers.find(({ pattern }) => pattern.test(lowerUrl));
-  return matchedIcon?.icon ?? Link2;
+  return matchedIcon?.icon ?? LinkIcon;
 };