remove global .icon style

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>