feat: use lucide icons

package.json

@@ -19,7 +19,6 @@
     "@algolia/autocomplete-core": "^1.9.2",
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
     "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.18",
     "@markdoc/markdoc": "^0.3.2",
     "@sindresorhus/slugify": "^2.1.0",
     "@svgr/webpack": "^8.1.0",
@@ -39,6 +38,7 @@
     "hastscript": "^8.0.0",
     "json-schema": "^0.4.0",
     "jsonc-parser": "^3.2.0",
+    "lucide-react": "^0.299.0",
     "mdast-util-to-string": "^4.0.0",
     "mermaid": "^10.5.0",
     "nanoid": "^5.0.4",
@@ -48,7 +48,6 @@
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-feather": "^2.0.10",
     "react-highlight-words": "^0.20.0",
     "rehype-autolink-headings": "^7.0.0",
     "rehype-pretty-code": "^0.10.1",

src/components/DocsHeader.tsx

@@ -3,10 +3,10 @@
 import { navigation } from "@/build/navigation.mjs";
 import { NavCategory, Section } from "@/lib/types";
 import Link from "next/link";
-import ChevronRightIcon from "@/components/svgs/chevron-right.svg";
 import { MobileTableOfContents } from "@/components/MobileTableOfContents";
 import { useFindNavItemByLink } from "@/lib/hooks/useFindNavItemByLink";
 import { nanoid } from "nanoid";
+import { ChevronRightIcon } from "lucide-react";
 
 export function DocsHeader({
   title,
@@ -54,7 +54,9 @@ export function DocsHeader({
             ) : (
               <p>{item.label}</p>
             )}
-            {index < breadcrumbItems.length - 1 && <ChevronRightIcon />}
+            {index < breadcrumbItems.length - 1 && (
+              <ChevronRightIcon width={18} height={18} />
+            )}
           </div>
         ))}
       </div>

src/components/MobileNavigation.tsx

@@ -4,26 +4,10 @@ import { Dialog } from "@headlessui/react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
-import { Bars3Icon as MenuIcon } from "@heroicons/react/24/outline";
 
 import LogoIcon from "./svgs/logo.svg";
 import { Navigation } from "@/components/Navigation";
-import { ThemeSelector } from "@/components/ThemeSelector";
-
-function CloseIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth="2"
-      strokeLinecap="round"
-      {...props}
-    >
-      <path d="M5 5l14 14M19 5l-14 14" />
-    </svg>
-  );
-}
+import { MenuIcon, X as CloseIcon } from "lucide-react";
 
 function CloseOnNavigation({ close }: { close: () => void }) {
   let pathname = usePathname();
@@ -83,7 +67,7 @@ export function MobileNavigation() {
                 onClick={() => close()}
                 aria-label="Close navigation"
               >
-                <CloseIcon className="h-6 w-6 stroke-slate-500" />
+                <CloseIcon className="text-slate-500" />
               </button>
             </div>
           </div>

src/components/MobileTableOfContents.tsx

@@ -3,7 +3,7 @@
 import { Section } from "@/lib/types";
 import { Listbox, Transition } from "@headlessui/react";
 import clsx from "classnames";
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Link from "next/link";
 
 export function MobileTableOfContents({

src/components/PrevNextLinks.tsx

@@ -4,16 +4,9 @@ import { navigation } from "@/build/navigation.mjs";
 import { useFindNavItemByLink } from "@/lib/hooks/useFindNavItemByLink";
 import { NavCategory } from "@/lib/types";
 import clsx from "classnames";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 
-function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
-      <path d="m9.182 13.423-1.17-1.16 3.505-3.505H3V7.065h8.517l-3.506-3.5L9.181 2.4l5.512 5.511-5.511 5.512Z" />
-    </svg>
-  );
-}
-
 function PageLink({
   label,
   href,
@@ -38,12 +31,11 @@ function PageLink({
           )}
         >
           {label}
-          <ArrowIcon
-            className={clsx(
-              "h-6 w-6 flex-none fill-current",
-              dir === "previous" && "-scale-x-100",
-            )}
-          />
+          {dir === "previous" ? (
+            <ArrowLeftIcon className="flex-none" />
+          ) : (
+            <ArrowRightIcon className="flex-none" />
+          )}
         </Link>
       </dd>
     </div>

src/components/Search.tsx

@@ -11,6 +11,7 @@ import {
 } from "@algolia/autocomplete-core";
 import { Dialog } from "@headlessui/react";
 import clsx from "classnames";
+import { SearchIcon } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   Fragment,
@@ -33,14 +34,6 @@ type Autocomplete = AutocompleteApi<
   React.KeyboardEvent
 >;
 
-function SearchIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20" {...props}>
-      <path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z" />
-    </svg>
-  );
-}
-
 function useAutocomplete({
   close,
 }: {
@@ -257,7 +250,7 @@ const SearchInput = forwardRef<
 
   return (
     <div className="group relative flex h-12">
-      <SearchIcon />
+      <SearchIcon className="absolute bottom-0 left-3 top-0 m-auto text-slate-400" />
       <input
         ref={inputRef}
         className={clsx(
@@ -438,7 +431,7 @@ export function Search() {
         className="group flex h-6 w-6 items-center justify-center rounded-xl bg-transparent px-3.5 hover:bg-white hover:ring-2 hover:ring-pink md:h-auto md:w-80 md:flex-none md:justify-start md:p-3.5 md:pr-5 md:text-sm md:ring-1 md:ring-inset md:ring-gray-600 lg:w-96"
         {...buttonProps}
       >
-        <SearchIcon className="h-5 w-5 flex-none fill-gray-600 opacity-50 group-hover:fill-gray-600 dark:fill-white" />
+        <SearchIcon className="h-5 w-5 flex-none text-gray-600 opacity-50 group-hover:text-gray-600 dark:text-white" />
         <span className="sr-only text-base text-gray-600 group-hover:text-black md:not-sr-only md:ml-1.5">
           Search
         </span>

src/components/mdx/Callout.tsx

@@ -1,9 +1,9 @@
 import {
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  LightBulbIcon,
-  ShieldExclamationIcon,
-} from "@heroicons/react/20/solid";
+  AlertTriangleIcon,
+  InfoIcon,
+  LightbulbIcon,
+  ShieldAlertIcon,
+} from "lucide-react";
 
 type CalloutType = "note" | "tip" | "info" | "caution" | "danger";
 
@@ -24,10 +24,7 @@ const Note = ({ children, title }: Omit<CalloutProps, "type">) => (
   >
     <div className="flex">
       <div className="flex-shrink-0 pt-[6px]">
-        <InformationCircleIcon
-          className={`h-5 w-5 text-gray-600`}
-          aria-hidden="true"
-        />
+        <InfoIcon className={`h-5 w-5 text-gray-600`} aria-hidden="true" />
       </div>
       <div className="ml-3">
         <h3 className={`text-md font-medium text-gray-800`}>
@@ -47,7 +44,7 @@ const Tip = ({ children, title }: Omit<CalloutProps, "type">) => (
   >
     <div className="flex">
       <div className="flex-shrink-0 pt-[6px]">
-        <LightBulbIcon
+        <LightbulbIcon
           className={`h-5 w-5 text-green-400`}
           aria-hidden="true"
         />
@@ -70,10 +67,7 @@ const Info = ({ children, title }: Omit<CalloutProps, "type">) => (
   >
     <div className="flex">
       <div className="flex-shrink-0 pt-[6px]">
-        <InformationCircleIcon
-          className={`h-5 w-5 text-blue-400`}
-          aria-hidden="true"
-        />
+        <InfoIcon className={`h-5 w-5 text-blue-400`} aria-hidden="true" />
       </div>
       <div className="ml-3">
         <h3 className={`text-md font-medium text-blue-700`}>
@@ -93,7 +87,7 @@ const Caution = ({ children, title }: Omit<CalloutProps, "type">) => (
   >
     <div className="flex">
       <div className="flex-shrink-0 pt-[6px]">
-        <ExclamationTriangleIcon
+        <AlertTriangleIcon
           className={`h-5 w-5 text-yellow-400`}
           aria-hidden="true"
         />
@@ -116,7 +110,7 @@ const Danger = ({ children, title }: Omit<CalloutProps, "type">) => (
   >
     <div className="flex">
       <div className="flex-shrink-0 pt-[6px]">
-        <ShieldExclamationIcon
+        <ShieldAlertIcon
           className={`h-5 w-5 text-red-400`}
           aria-hidden="true"
         />

src/components/mdx/index.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon } from "lucide-react";
 import FeaturePremiere from "./FeaturePremiere";
 import Screenshot from "./Screenshot";
 import YouTubeVideo from "./YouTubeVideo";

src/components/mdx/ui-icons.tsx

@@ -1,13 +1,14 @@
 import {
-  BoltIcon,
   CogIcon,
   EyeIcon,
-  PresentationChartLineIcon,
-  RectangleGroupIcon,
+  FileTextIcon,
+  LayoutTemplateIcon,
+  ListIcon,
+  PresentationIcon,
   RssIcon,
-} from "@heroicons/react/24/outline";
+  ZapIcon,
+} from "lucide-react";
 import { FC, PropsWithChildren } from "react";
-import { FileText, List } from "react-feather";
 
 function SvgWrapper({ children }: PropsWithChildren) {
   return (
@@ -19,13 +20,13 @@ function SvgWrapper({ children }: PropsWithChildren) {
 
 export const CodeEditorTabIcon: FC = () => (
   <SvgWrapper>
-    <FileText />
+    <FileTextIcon />
   </SvgWrapper>
 );
 
 export const ApiTestConsoleTabIcon: FC = () => (
   <SvgWrapper>
-    <BoltIcon />
+    <ZapIcon />
   </SvgWrapper>
 );
 
@@ -37,13 +38,13 @@ export const LiveLogsTabIcon: FC = () => (
 
 export const DashboardTabIcon: FC = () => (
   <SvgWrapper>
-    <PresentationChartLineIcon />
+    <PresentationIcon />
   </SvgWrapper>
 );
 
 export const BuildStatusTabIcon: FC = () => (
   <SvgWrapper>
-    <List />
+    <ListIcon />
   </SvgWrapper>
 );
 
@@ -55,7 +56,7 @@ export const SettingsTabIcon: FC = () => (
 
 export const DeveloperPortalIcon: FC = () => (
   <SvgWrapper>
-    <RectangleGroupIcon />
+    <LayoutTemplateIcon />
   </SvgWrapper>
 );
 

src/lib/markdown/mdx.ts

@@ -209,10 +209,10 @@ function buildTableOfContents(nodes: (Element & { tagName: "h2" | "h3" })[]) {
       }
     })
     .filter((h) => typeof h !== "undefined") as {
-    id: string;
-    title: string;
-    level: 2 | 3;
-  }[];
+      id: string;
+      title: string;
+      level: 2 | 3;
+    }[];
 
   const toc: Section[] = [];
   let previous: Section;