Replace Icons with heroicons (#1066)

* replace icons with heroicons

* prettier

* update chevron direction

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';
 

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,
@@ -14,7 +13,7 @@ export default function CartIcon({
   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">
       {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">
@@ -71,7 +70,7 @@ 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">

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() {
@@ -39,7 +39,7 @@ export default function Search() {
         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">
-        <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 { ChevronDownIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -45,7 +45,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
-        <Caret className="h-4 rotate-90" />
+        <ChevronDownIcon className="h-4" />
       </div>
       {openSelect && (
         <div

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,
@@ -57,14 +57,14 @@ export function Gallery({
               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}