remove global .icon style

components/CodeBlock/CodeBlock.module.css

@@ -22,7 +22,7 @@
   margin: 1em auto;
 }
 
-.block .copy_btn {
+.copy_btn {
   position: absolute;
   top: 0;
   right: 0;
@@ -36,7 +36,7 @@
   transition: background 0.25s ease, border 0.25s ease;
 }
 
-.block .copy_btn:hover {
+.copy_btn:hover {
   color: var(--link);
 }
 

components/ContactForm/ContactForm.module.css

@@ -70,6 +70,12 @@
   margin-right: var(--rounded-edge-radius);
 }
 
+.result_icon {
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: -0.3em;
+}
+
 .result_success,
 .result_error {
   font-weight: 600;

components/ContactForm/ContactForm.tsx

@@ -163,7 +163,7 @@ const ContactForm = ({ className }: Props) => {
                 <span>Sending...</span>
               ) : (
                 <>
-                  <SendIcon className={classNames("icon", styles.send_icon)} /> <span>Send</span>
+                  <SendIcon className={classNames(styles.send_icon)} /> <span>Send</span>
                 </>
               )}
             </button>
@@ -175,7 +175,12 @@ const ContactForm = ({ className }: Props) => {
                 hidden: !submitted || !feedback || isSubmitting,
               })}
             >
-              {success ? <CheckOcticon fill="CurrentColor" /> : <XOcticon fill="CurrentColor" />} {feedback}
+              {success ? (
+                <CheckOcticon className={styles.result_icon} fill="CurrentColor" />
+              ) : (
+                <XOcticon className={styles.result_icon} fill="CurrentColor" />
+              )}{" "}
+              {feedback}
             </span>
           </div>
         </Form>

components/CopyButton/CopyButton.module.css

@@ -6,3 +6,9 @@
 .button.success {
   color: var(--success) !important;
 }
+
+.icon {
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.3em;
+}

components/CopyButton/CopyButton.tsx

@@ -54,7 +54,11 @@ const CopyButton = forwardRef(function CopyButton(
       disabled={!!copied}
       ref={ref}
     >
-      {copied ? <CheckOcticon fill="currentColor" /> : <ClipboardOcticon fill="currentColor" />}
+      {copied ? (
+        <CheckOcticon className={styles.icon} fill="currentColor" />
+      ) : (
+        <ClipboardOcticon className={styles.icon} fill="currentColor" />
+      )}
     </button>
   );
 });

components/Footer/Footer.module.css

@@ -21,6 +21,12 @@
   line-height: 2.3;
 }
 
+.icon {
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: -0.2em;
+}
+
 .nextjs:hover {
   color: var(--medium);
 }

components/Footer/Footer.tsx

@@ -22,7 +22,7 @@ const Footer = () => (
       <div className={styles.powered_by}>
         Made with{" "}
         <span className={styles.heart} title="Love">
-          <HeartIcon />
+          <HeartIcon className={styles.icon} />
         </span>{" "}
         and{" "}
         <a
@@ -33,7 +33,7 @@ const Footer = () => (
           target="_blank"
           rel="noopener noreferrer"
         >
-          <NextjsLogo fill="currentColor" />
+          <NextjsLogo className={styles.icon} fill="currentColor" />
         </a>
         .{" "}
         <a

components/Menu/Menu.module.css

@@ -4,15 +4,16 @@
   margin: 0;
 }
 
-.menu_item {
+.link {
   list-style: none;
   display: inline-flex;
   margin-left: 1em;
 }
 
-.menu_item .icon {
+.icon {
   width: 1.25em;
   height: 1.25em;
+  vertical-align: -0.3em;
 }
 
 @media screen and (max-width: 768px) {
@@ -22,11 +23,11 @@
     margin-left: 1em;
   }
 
-  .menu_item {
+  .link {
     margin-left: 0;
   }
 
-  .menu_item .icon {
+  .icon {
     width: 1.8em;
     height: 1.8em;
   }
@@ -38,7 +39,7 @@
   }
 
   /* the home icon is redundant when space is SUPER tight */
-  .menu_item:first-of-type {
+  .link:first-of-type {
     display: none;
   }
 }

components/Menu/Menu.tsx

@@ -13,22 +13,22 @@ type Props = {
 
 const links = [
   {
-    icon: <HomeIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
+    icon: <HomeIcon className={styles.icon} aria-hidden={true} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
+    icon: <NotesIcon className={styles.icon} aria-hidden={true} />,
     text: "Notes",
     href: "/notes",
   },
   {
-    icon: <ProjectsIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
+    icon: <ProjectsIcon className={styles.icon} aria-hidden={true} />,
     text: "Projects",
     href: "/projects",
   },
   {
-    icon: <ContactIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
+    icon: <ContactIcon className={styles.icon} aria-hidden={true} />,
     text: "Contact",
     href: "/contact",
   },
@@ -40,13 +40,13 @@ const Menu = ({ className }: Props) => {
   return (
     <ul className={classNames(styles.menu, className)}>
       {links.map((link, index) => (
-        <li key={index} className={styles.menu_item}>
+        <li key={index} className={styles.link}>
           {/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
           <MenuLink {...link} current={link.href === `/${router.pathname.split("/")[1]}`} />
         </li>
       ))}
 
-      <li className={styles.menu_item}>
+      <li className={styles.link}>
         <ThemeToggle className={styles.icon} />
       </li>
     </ul>

components/NoteMeta/NoteMeta.module.css

@@ -17,39 +17,37 @@
   white-space: nowrap;
 }
 
-.meta > div:last-of-type {
-  /* fix potential layout shift when number of hits loads */
-  min-width: 7em;
-  margin-right: 0;
-}
-
 .icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.2em;
   margin-right: 0.6em;
 }
 
-.date a,
-.edit a {
-  display: inline-flex;
-}
-
 .tags {
   white-space: normal;
   display: inline-flex;
   flex-wrap: wrap;
 }
 
-.tags .tag {
+.tag {
   text-transform: lowercase;
   white-space: nowrap;
   margin-right: 0.75em;
 }
 
-.tags .tag::before {
+.tag::before {
   content: "\0023"; /* cosmetically hashtagify tags */
   padding-right: 0.125em;
   color: var(--light);
 }
 
-.tags .tag:last-of-type {
+.tag:last-of-type {
+  margin-right: 0;
+}
+
+.views {
+  /* fix potential layout shift when number of hits loads */
+  min-width: 7em;
   margin-right: 0;
 }

components/NoteMeta/NoteMeta.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import classNames from "classnames";
 import { format } from "date-fns";
 import HitCounter from "../HitCounter/HitCounter";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
@@ -12,9 +11,9 @@ type Props = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;
 
 const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
   <div className={styles.meta}>
-    <div className={styles.date}>
+    <div>
       <span>
-        <DateIcon className={classNames("icon", styles.icon)} />
+        <DateIcon className={styles.icon} />
       </span>
       <span title={format(new Date(date), "PPppp")}>
         <Link href={`/notes/${slug}/`}>
@@ -26,7 +25,7 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
     {tags.length > 0 && (
       <div className={styles.tags}>
         <span>
-          <TagIcon className={classNames("icon", styles.icon)} />
+          <TagIcon className={styles.icon} />
         </span>
         {tags.map((tag) => (
           <span key={tag} className={styles.tag}>
@@ -38,7 +37,7 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
 
     <div>
       <span>
-        <EditIcon className={classNames("icon", styles.icon)} />
+        <EditIcon className={styles.icon} />
       </span>
       <span>
         <a
@@ -52,9 +51,9 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
       </span>
     </div>
 
-    <div>
+    <div className={styles.views}>
       <span>
-        <ViewsIcon className={classNames("icon", styles.icon)} />
+        <ViewsIcon className={styles.icon} />
       </span>
       <HitCounter slug={`notes/${slug}`} />
     </div>

components/OctocatLink/OctocatLink.module.css

@@ -6,3 +6,9 @@
 .link:hover {
   color: var(--link) !important;
 }
+
+.icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.2em;
+}

components/OctocatLink/OctocatLink.tsx

@@ -15,7 +15,7 @@ const OctocatLink = ({ repo, className }: Props) => (
     target="_blank"
     rel="noopener noreferrer"
   >
-    <OctocatOcticon fill="currentColor" className={classNames("icon", className)} />
+    <OctocatOcticon fill="currentColor" className={classNames(styles.icon, className)} />
   </a>
 );
 

components/ThemeToggle/ThemeToggle.module.css

@@ -12,3 +12,9 @@
 .button:hover {
   color: var(--warning);
 }
+
+.icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.2em;
+}

components/ThemeToggle/ThemeToggle.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, memo } from "react";
 import { useTheme } from "next-themes";
-import classNames from "classnames";
 import { SunIcon, MoonIcon } from "../Icons";
 
 import styles from "./ThemeToggle.module.css";
@@ -18,7 +17,7 @@ const ThemeToggle = ({ className }: Props) => {
   if (!mounted) {
     return (
       <button className={styles.button} aria-hidden={true}>
-        <SunIcon className={classNames("icon", className)} />
+        <SunIcon className={className} />
       </button>
     );
   }
@@ -29,11 +28,7 @@ const ThemeToggle = ({ className }: Props) => {
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
       title={resolvedTheme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
     >
-      {resolvedTheme === "light" ? (
+      {resolvedTheme === "light" ? <SunIcon className={className} /> : <MoonIcon className={className} />}
-        <SunIcon className={classNames("icon", className)} />
-      ) : (
-        <MoonIcon className={classNames("icon", className)} />
-      )}
     </button>
   );
 };

next.config.js

@@ -62,7 +62,6 @@ module.exports = (phase, { defaultConfig }) => {
                 typescript: true,
                 svgProps: {
                   "aria-hidden": true,
-                  className: "icon",
                 },
               },
             },

styles/index.css

@@ -12,14 +12,6 @@ a {
   text-decoration: none;
 }
 
-/* make SVG icons relative in size/position to surrounding text */
-.icon {
-  display: inline-block;
-  height: 1.2em;
-  width: 1.2em;
-  vertical-align: -0.2em;
-}
-
 /* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
 @media (prefers-reduced-motion: reduce) {
   *,