replace icons with heroicons

components/cart/delete-item-button.tsx

@@ -1,4 +1,4 @@
-import CloseIcon from 'components/icons/close';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import LoadingDots from 'components/loading-dots';
 import { useRouter } from 'next/navigation';
 
@@ -37,7 +37,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
       {isPending ? (
         <LoadingDots className="bg-white" />
       ) : (
-        <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
       )}
     </button>
   );

components/cart/edit-item-quantity-button.tsx

@@ -1,10 +1,9 @@
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { removeItem, updateItemQuantity } from 'components/cart/actions';
-import MinusIcon from 'components/icons/minus';
-import PlusIcon from 'components/icons/plus';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 
@@ -52,9 +51,9 @@ export default function EditItemQuantityButton({
       {isPending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className="h-4 w-4 dark:text-gray-500" />
+        <PlusIcon className="w-4 h-4 dark:text-gray-500" />
       ) : (
-        <MinusIcon className="h-4 w-4 dark:text-gray-500" />
+        <MinusIcon className="w-4 h-4 dark:text-gray-500" />
       )}
     </button>
   );

components/icons/arrow-left.tsx

@@ -1,14 +0,0 @@
-export default function ArrowLeftIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M19 12H5" />
-      <path d="M12 19L5 12L12 5" />
-    </svg>
-  );
-}

components/icons/caret-right.tsx

@@ -1,17 +0,0 @@
-export default function CaretRightIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M9 18l6-6-6-6" />
-    </svg>
-  );
-}

components/icons/cart.tsx

@@ -1,6 +1,5 @@
-import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import CloseIcon from './close';
 
 export default function CartIcon({
   className,
@@ -12,9 +11,9 @@ export default function CartIcon({
   icon?: string;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-gray-200 text-black transition-colors dark:border-gray-700 dark:text-white">
+    <div className="relative flex items-center justify-center text-black transition-colors border border-gray-200 rounded-md h-11 w-11 dark:border-gray-700 dark:text-white">
       {icon === 'close' ? (
-        <CloseIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+        <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
       ) : (
         <ShoppingCartIcon
           className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}

components/icons/close.tsx

@@ -1,17 +0,0 @@
-export default function CloseIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
-    </svg>
-  );
-}

components/icons/menu.tsx

@@ -1,16 +0,0 @@
-export default function MenuIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M4 6h16M4 12h16m-7 6h7" />
-    </svg>
-  );
-}

components/icons/minus.tsx

@@ -1,16 +0,0 @@
-export default function MinusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M5 12H19" />
-    </svg>
-  );
-}

components/icons/plus.tsx

@@ -1,17 +0,0 @@
-export default function PlusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M12 5V19" />
-      <path d="M5 12H19" />
-    </svg>
-  );
-}

components/icons/search.tsx

@@ -1,11 +0,0 @@
-export default function SearchIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} fill="currentColor" viewBox="0 0 20 20">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-      />
-    </svg>
-  );
-}

components/layout/navbar/mobile-menu.tsx

@@ -5,8 +5,7 @@ import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { Fragment, useEffect, useState } from 'react';
 
-import CloseIcon from 'components/icons/close';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
-import MenuIcon from 'components/icons/menu';
 import { Menu } from 'lib/shopify/types';
 import Search from './search';
 
@@ -39,7 +38,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
         className="md:hidden"
         data-testid="open-mobile-menu"
       >
-        <MenuIcon className="h-6" />
+        <Bars3Icon className="h-6" />
       </button>
       <Transition show={isOpen}>
         <Dialog onClose={closeMobileMenu} className="relative z-50">
@@ -63,7 +62,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-[-100%]"
           >
-            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
+            <Dialog.Panel className="fixed top-0 bottom-0 left-0 right-0 flex flex-col w-full h-full pb-6 bg-white dark:bg-black">
               <div className="p-4">
                 <button
                   className="mb-4"
@@ -71,10 +70,10 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                   aria-label="Close mobile menu"
                   data-testid="close-mobile-menu"
                 >
-                  <CloseIcon className="h-6" />
+                  <XMarkIcon className="h-6" />
                 </button>
 
-                <div className="mb-4 w-full">
+                <div className="w-full mb-4">
                   <Search />
                 </div>
                 {menu.length ? (
@@ -83,7 +82,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                       <li key={item.title}>
                         <Link
                           href={item.path}
-                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-gray-500 dark:text-white"
+                          className="py-1 text-xl text-black transition-colors rounded-lg hover:text-gray-500 dark:text-white"
                           onClick={closeMobileMenu}
                         >
                           {item.title}

components/layout/navbar/search.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from 'next/navigation';
 
-import SearchIcon from 'components/icons/search';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { createUrl } from 'lib/utils';
 
 export default function Search() {
@@ -28,7 +28,7 @@ export default function Search() {
   return (
     <form
       onSubmit={onSubmit}
-      className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
+      className="relative flex items-center w-full p-0 m-0 bg-transparent border border-gray-200 dark:border-gray-500"
     >
       <input
         type="text"
@@ -38,8 +38,8 @@ export default function Search() {
         defaultValue={searchParams?.get('q') || ''}
         className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
       />
-      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+      <div className="absolute top-0 right-0 flex items-center h-full mr-3">
-        <SearchIcon className="h-5" />
+        <MagnifyingGlassIcon className="h-5" />
       </div>
     </form>
   );

components/layout/search/filter/dropdown.tsx

@@ -3,7 +3,7 @@
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
-import Caret from 'components/icons/caret-right';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -42,17 +42,17 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         onClick={() => {
           setOpenSelect(!openSelect);
         }}
-        className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
+        className="flex items-center justify-between w-full px-4 py-2 text-sm border rounded border-black/30 dark:border-white/30"
       >
         <div>{active}</div>
-        <Caret className="h-4 rotate-90" />
+        <ChevronRightIcon className="h-4" />
       </div>
       {openSelect && (
         <div
           onClick={() => {
             setOpenSelect(false);
           }}
-          className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
+          className="absolute z-40 w-full p-4 bg-white shadow-md rounded-b-md dark:bg-black"
         >
           {list.map((item: ListItem, i) => (
             <FilterItem key={i} item={item} />

components/product/gallery.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { GridTileImage } from 'components/grid/tile';
-import ArrowLeftIcon from 'components/icons/arrow-left';
 
 export function Gallery({
   title,
@@ -51,20 +51,20 @@ export function Gallery({
         )}
 
         {images.length > 1 ? (
-          <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
+          <div className="absolute flex flex-row h-12 text-white border border-white shadow-xl bottom-10 right-10 dark:border-black dark:text-black">
             <button
               aria-label="Previous product image"
               className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
               onClick={() => handleNavigate('previous')}
             >
-              <ArrowLeftIcon className="h-6" />
+              <ChevronLeftIcon className="h-6" />
             </button>
             <button
               aria-label="Next product image"
               className={clsx(buttonClassName)}
               onClick={() => handleNavigate('next')}
             >
-              <ArrowLeftIcon className="h-6 rotate-180" />
+              <ChevronRightIcon className="h-6" />
             </button>
           </div>
         ) : null}
@@ -78,7 +78,7 @@ export function Gallery({
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className="h-full w-1/4"
+                className="w-1/4 h-full"
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage