Merge pull request #1270 from acmcsufoss/fix/863

fix: Footer icons lacking hover effect

Author: dianellasy

src/lib/components/footer/footer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import BwIcon from '$lib/components/bw-icon/bw-icon.svelte';
-  import { AcmTheme } from '$lib/public/legacy/theme';
+  import SocialIcon from '$lib/components/social-icon/social-icon.svelte';
 
   const footerItems = [
     { title: 'Source Code', path: '/code' },
@@ -21,11 +20,7 @@
         {#each socials as socialPath (socialPath)}
           <li>
             <a href={socialPath} target="_blank" rel="noopener noreferrer">
-              <BwIcon
-                src={`/assets${socialPath}.svg`}
-                alt={socialPath.slice(1)}
-                filterOn={[AcmTheme.Dark, AcmTheme.Light]}
-              />
+              <SocialIcon src={`/assets${socialPath}.svg`} alt={socialPath.slice(1)} width={24} />
             </a>
           </li>
         {/each}
@@ -107,28 +102,17 @@
 
         .socials {
           display: flex;
+          padding-top: 6px;
           gap: 32px;
 
           a {
             display: flex;
-            padding-top: 6px;
+            --icon-color: #ffffff;
 
             &:hover {
-              & :global(path) {
-                fill: var(--acm-blue);
-              }
+              --icon-color: var(--acm-blue);
             }
           }
-
-          & :global(svg) {
-            height: 32px;
-            width: auto;
-          }
-
-          & :global(path) {
-            fill: var(--perma-light);
-            transition: 0.25s ease-in-out;
-          }
         }
       }
 

src/lib/components/social-icon/social-icon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let src: string;
+  export let alt: string;
+  export let width = 32;
+  export let height = width;
+</script>
+
+<div
+  role="img"
+  aria-label={alt}
+  class="social-icon"
+  style:--icon-url="url({src})"
+  style:--size-w="{width}px"
+  style:--size-h="{height}px"
+></div>
+
+<style lang="scss">
+  .social-icon {
+    width: var(--size-w);
+    height: var(--size-h);
+    display: inline-block;
+
+    mask: var(--icon-url) no-repeat center / contain;
+    -webkit-mask: var(--icon-url) no-repeat center / contain;
+
+    background-color: var(--icon-color, #ffffff);
+
+    transition: background-color 0.25s ease-in-out;
+  }
+</style>