switch to spectrum for icons

src/components/index/ActionButtons.js

@@ -2,19 +2,23 @@ import React from "react";
 import classnames from "classnames";
 import { Link } from "gatsby";
 
+import Image from "@spectrum-icons/workflow/Image";
+import Shuffle from "@spectrum-icons/workflow/Shuffle";
+
 const getButtonClasses = (isClient) =>
   classnames(
     "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline text-black",
-    isClient
-      ? "cool-border-small hover:bg-vibrant"
-      : "text-gray-200"
+    isClient ? "cool-border-small hover:bg-vibrant" : "text-gray-200"
   );
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
   <div className="flex flex-col">
     <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
       <h3 className="mb-2 drop-shadow">Try my word game!</h3>
-      <a className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" href="https://buzzwords.gg">
+      <a
+        className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2"
+        href="https://buzzwords.gg"
+      >
         Buzzwords
       </a>
     </div>
@@ -22,13 +26,11 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
       <Link
         className={getButtonClasses(isClient, "muted")}
         id="image-link"
-        title="view image details"
-        to={`/photogallery/${image.base}/`}
-      >
-        <span className="icon-offset">
-          <ion-icon name="image"></ion-icon>
-        </span>
-      </Link>
+          title="view image details"
+          to={`/photogallery/${image.base}/`}
+        >
+          <Image aria-label="view image details" />
+        </Link>
       <button
         className={getButtonClasses(isClient, "muted")}
         id="shuffle-button"
@@ -38,9 +40,7 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
         title="shuffle image"
         type="button"
       >
-        <span className="icon-offset">
-          <ion-icon name="shuffle"></ion-icon>
-        </span>
+        <Shuffle aria-label="shuffle image" />
       </button>
       <Link
         className={getButtonClasses(isClient, "muted")}