remove global .icon style

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>