Use icon components

mattsherman · Nov 14, 2024 · bf2715d · bf2715d
1 parent 9012825
commit bf2715d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 28 deletions.
diff --git a/src/base.css b/src/base.css
@@ -32,6 +32,10 @@ a {
   text-decoration-style: dotted;
   text-decoration-thickness: 1px;
 
+  svg.icon {
+    fill: var(--link-color);
+  }
+
   &:hover {
     text-decoration-style: solid;
     text-decoration-thickness: 2px;
@@ -42,6 +46,11 @@ a {
   }
 }
 
+/* Nesting this under &:visited above doesn't work; not sure if it should */
+a:visited svg.icon {
+  fill: var(--visited-link-color);
+}
+
 body > nav {
   display: flex;
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -11,29 +11,27 @@ export default (data: Lume.Data, helpers: Lume.Helpers) => {
       <ul class="home-page-icons">
         {hasPosts && (
           <li>
-            <a href="/blog" class="home-page-blog-link">
+            <a href="/blog">
+              <data.comp.icons.BlogIcon />
               Blog
             </a>
           </li>
         )}
         <li>
-          <a href="/resume" class="home-page-resume-link">
+          <a href="/resume">
+            <data.comp.icons.ResumeIcon />
             Résumé
           </a>
         </li>
         <li>
-          <a
-            href="https://github.com/mattsherman"
-            class="home-page-github-link"
-          >
+          <a href="https://github.com/mattsherman">
+            <data.comp.icons.GitHubIcon />
             GitHub
           </a>
         </li>
         <li>
-          <a
-            href="https://www.linkedin.com/in/matthewsherman/"
-            class="home-page-linkedin-link"
-          >
+          <a href="https://www.linkedin.com/in/matthewsherman/">
+            <data.comp.icons.LinkedInIcon />
             LinkedIn
           </a>
         </li>

diff --git a/src/styles.css b/src/styles.css
@@ -95,27 +95,10 @@ body > footer {
 
       text-transform: uppercase;
 
-      &::before {
-        display: block;
+      .icon {
         width: 5rem;
         height: 5rem;
       }
-
-      &.home-page-blog-link::before {
-        content: url(static/icons/news-line.svg);
-      }
-
-      &.home-page-resume-link::before {
-        content: url(static/icons/file-text-line.svg);
-      }
-
-      &.home-page-github-link::before {
-        content: url(static/icons/github-line.svg);
-      }
-
-      &.home-page-linkedin-link::before {
-        content: url(static/icons/linkedin-box-line.svg);
-      }
     }
   }
 }