switch to spectrum for icons

package.json

@@ -24,6 +24,7 @@
     "@adobe/react-spectrum": "^3.19.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@spectrum-icons/workflow": "^4.0.0",
     "autoprefixer": "^10.2.6",
     "babel-eslint": "^10.1.0",
     "babel-plugin-preval": "^5.0.0",

src/components/GalleryImage/GalleryImage.js

@@ -1,5 +1,17 @@
 import React, { useState } from "react";
 import { graphql, navigate, Link } from "gatsby";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import { Helmet } from "react-helmet";
+import classnames from "classnames";
+
+import Calendar from "@spectrum-icons/workflow/Calendar";
+import Stopwatch from "@spectrum-icons/workflow/Stopwatch";
+import Exposure from "@spectrum-icons/workflow/Exposure";
+import Filmroll from "@spectrum-icons/workflow/Filmroll";
+import Camera from "@spectrum-icons/workflow/Camera";
+import Circle from "@spectrum-icons/workflow/Circle";
+import Location from "@spectrum-icons/workflow/Location";
+
 import {
   getAspectRatio,
   getMeta,
@@ -9,9 +21,6 @@ import {
   getHelmetSafeBodyStyle,
   hasName,
 } from "../../utils";
-import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import { Helmet } from "react-helmet";
-import classnames from "classnames";
 import MetadataItem from "./MetadataItem";
 
 const logKeyShortcut = (keyCode) => {
@@ -197,33 +206,33 @@ const GalleryImage = ({ data, pageContext }) => {
             <div className="flex flex-col items-end">
               <MetadataItem
                 data={dateTaken.toLocaleDateString()}
-                icon="calendar-outline"
+                icon={<Calendar />}
                 title="date taken"
               />
               <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
                 <MetadataItem
                   data={shutterSpeed}
-                  icon="stopwatch-outline"
+                  icon={<Stopwatch />}
                   title="shutter speed"
                 />
                 {meta.FNumber && (
                   <MetadataItem
                     data={`f/${meta.FNumber}`}
-                    icon="aperture-outline"
+                    icon={<Exposure />}
                     title="aperture"
                   />
                 )}
-                <MetadataItem data={meta.ISO} icon="film-outline" title="ISO" />
+                <MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
               </div>
               <MetadataItem
                 data={locationString}
-                icon="map-outline"
+                icon={<Location />}
                 title="location"
               />
               {(meta.Make || meta.Model) && (
                 <MetadataItem
                   data={[meta.Make, meta.Model].join(" ")}
-                  icon="camera-outline"
+                  icon={<Camera />}
                   title="camera"
                 />
               )}
@@ -235,7 +244,7 @@ const GalleryImage = ({ data, pageContext }) => {
                   ]
                     .filter(Boolean)
                     .join(" @")}
-                  icon="ellipse"
+                  icon={<Circle />}
                   title="lens"
                 />
               )}

src/components/GalleryImage/MetadataItem.js

@@ -7,8 +7,8 @@ const MetadataItem = ({ icon, data, title }) =>
         <span className="text-sm opacity-60 m-0 ">{title}</span>
         <span className="text-lg leading-4">{data}</span>
       </div>
-      <span className="icon-offset ml-2 mt-1 text-2xl">
+      <span className="ml-2 pb-2 text-2xl">
-        <ion-icon name={icon} title={title}></ion-icon>
+        {icon}
       </span>
     </div>
   ) : null;

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
+    isClient ? "cool-border-small hover:bg-vibrant" : "text-gray-200"
-      ? "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>
@@ -25,9 +29,7 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
           title="view image details"
           to={`/photogallery/${image.base}/`}
         >
-        <span className="icon-offset">
+          <Image aria-label="view image details" />
-          <ion-icon name="image"></ion-icon>
-        </span>
         </Link>
       <button
         className={getButtonClasses(isClient, "muted")}
@@ -38,9 +40,7 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
         title="shuffle image"
         type="button"
       >
-        <span className="icon-offset">
+        <Shuffle aria-label="shuffle image" />
-          <ion-icon name="shuffle"></ion-icon>
-        </span>
       </button>
       <Link
         className={getButtonClasses(isClient, "muted")}

src/html.js

@@ -40,10 +40,6 @@ export default function HTML(props) {
           key={"body"}
         />
         {props.postBodyComponents}
-        <script
-          src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
-          type="module"
-        ></script>
       </body>
     </html>
   );

src/styles/global.css

@@ -13,10 +13,6 @@
   transition: color .2s, background-color .2s;
 } */
 @layer utilities {
-  .icon-offset {
-    position: relative;
-    top: 2px;
-  }
   .scroll-snap-none {
     scroll-snap-type: none;
   }