Use SVG icons for welcome card

alveusgg · Oct 7, 2023 · 9ce8dbc · 9ce8dbc
1 parent d9367dd
commit 9ce8dbc
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 23 deletions.
diff --git a/src/assets/welcome/amazonWishlist.png b/src/assets/welcome/amazonWishlist.png
diff --git a/src/assets/welcome/github.png b/src/assets/welcome/github.png
diff --git a/src/assets/welcome/instagram.png b/src/assets/welcome/instagram.png
diff --git a/src/assets/welcome/tiktok.png b/src/assets/welcome/tiktok.png
diff --git a/src/assets/welcome/twitter.png b/src/assets/welcome/twitter.png
diff --git a/src/assets/welcome/website.png b/src/assets/welcome/website.png
diff --git a/src/components/icons/BaseIcon.tsx b/src/components/icons/BaseIcon.tsx
@@ -0,0 +1,32 @@
+import { type SVGProps, type ReactNode } from "react";
+
+export type IconProps = SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  className?: string;
+  alt?: string;
+};
+
+export type BaseIconProps = IconProps & {
+  viewBox: string;
+  children: ReactNode | ReactNode[];
+};
+
+export function BaseIcon({
+  size = 24,
+  alt = "",
+  children,
+  ...props
+}: BaseIconProps) {
+  return (
+    <svg
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={alt}
+      width={size}
+      height={size}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
diff --git a/src/components/icons/IconAmazon.tsx b/src/components/icons/IconAmazon.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/amazon)
+export default function IconAmazon(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 448 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconGitHub.tsx b/src/components/icons/IconGitHub.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/github)
+export default function IconGitHub(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 496 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconGlobe.tsx b/src/components/icons/IconGlobe.tsx
@@ -0,0 +1,15 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from Heroicons (https://heroicons.com)
+// globe-alt-outline
+export default function IconGlobe(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M21.595 6.61677C21.5891 6.60578 21.583 6.59487 21.5765 6.58408C19.6868 3.24986 16.1062 1 12 1C7.8938 1 4.31309 3.2499 2.42341 6.58417C2.41703 6.59491 2.41091 6.60575 2.40505 6.61669C1.51032 8.208 1 10.0444 1 12C1 12.945 1.11917 13.8622 1.3433 14.7374C1.34576 14.7477 1.34841 14.758 1.35126 14.7682C2.57871 19.5034 6.88101 23 12 23C17.119 23 21.4213 19.5034 22.6487 14.7682C22.6516 14.758 22.6542 14.7477 22.6567 14.7374C22.8808 13.8622 23 12.945 23 12C23 10.0444 22.4897 8.20806 21.595 6.61677ZM11.9979 2.69231C11.0898 2.69345 10.0402 3.45242 9.16702 5.1988C8.66956 6.1937 8.27496 7.43143 8.03359 8.8295C9.2814 9.23968 10.6147 9.46154 12 9.46154L12.0012 9.46154C13.359 9.46349 14.6967 9.24685 15.9664 8.82946C15.725 7.43141 15.3304 6.19369 14.833 5.1988C13.9591 3.4511 12.9086 2.69231 12 2.69231L11.9979 2.69231ZM15.815 3.50757C16.0068 3.80378 16.1842 4.11701 16.3466 4.44197C16.8803 5.50932 17.297 6.7791 17.5676 8.17871C18.3319 7.80536 19.0602 7.35398 19.7404 6.82916C18.7741 5.38548 17.4145 4.22722 15.815 3.50757ZM20.5575 8.33297C19.7032 8.96668 18.7851 9.50025 17.8215 9.92687C17.8883 10.5997 17.9231 11.2929 17.9231 12C17.9231 13.1822 17.8259 14.3259 17.644 15.3999C18.8342 15.0396 19.9908 14.5644 21.097 13.9786C21.235 13.3409 21.3077 12.679 21.3077 12C21.3077 10.6979 21.0403 9.45826 20.5575 8.33297ZM20.2898 16.2367C19.2937 16.6612 18.2679 17.0077 17.2215 17.2737C16.9831 18.1057 16.6889 18.8735 16.3466 19.558C16.1842 19.883 16.0068 20.1962 15.815 20.4924C17.7464 19.6235 19.3279 18.115 20.2898 16.2367ZM12 21.3077C12.9086 21.3077 13.9591 20.5489 14.833 18.8012C15.0079 18.4514 15.1701 18.0715 15.3174 17.6652C14.2237 17.838 13.1143 17.9248 11.9993 17.9231C10.871 17.923 9.76312 17.8346 8.68229 17.6643C8.82967 18.071 8.99197 18.4511 9.16702 18.8012C10.0409 20.5489 11.0914 21.3077 12 21.3077ZM8.18496 20.4924C7.99324 20.1962 7.81585 19.883 7.65337 19.558C7.31109 18.8735 7.01691 18.1056 6.77853 17.2736C5.72199 17.0054 4.69702 16.6576 3.71039 16.237C4.67228 18.1151 6.25369 19.6235 8.18496 20.4924ZM2.90305 13.9786C3.99646 14.5578 5.15152 15.0358 6.35601 15.4001C6.17412 14.3261 6.07692 13.1823 6.07692 12C6.07692 11.2929 6.11169 10.5995 6.17856 9.92665C5.20496 9.49522 4.28821 8.95898 3.4428 8.33232C2.95978 9.45778 2.69231 10.6977 2.69231 12C2.69231 12.679 2.76501 13.341 2.90305 13.9786ZM4.25991 6.8287C4.93373 7.34806 5.66113 7.80118 6.43242 8.17835C6.70304 6.77888 7.11974 5.50923 7.65337 4.44197C7.81585 4.11701 7.99324 3.80378 8.18496 3.50757C6.58563 4.22715 5.22623 5.38524 4.25991 6.8287ZM7.76923 12C7.76923 11.5016 7.78794 11.0134 7.82377 10.5378C9.1455 10.9383 10.5475 11.1538 11.9994 11.1538C13.4256 11.1558 14.8323 10.9451 16.1762 10.5378C16.2121 11.0134 16.2308 11.5016 16.2308 12C16.2308 13.3806 16.0872 14.6835 15.8336 15.854C14.5766 16.1056 13.2931 16.2328 12.0013 16.2308L12 16.2308C10.6873 16.2308 9.40549 16.101 8.16632 15.8535C7.91272 14.6831 7.76923 13.3804 7.76923 12Z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconInstagram.tsx b/src/components/icons/IconInstagram.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/instagram)
+export default function IconInstagram(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 448 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconTikTok.tsx b/src/components/icons/IconTikTok.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/tiktok)
+export default function IconTikTok(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 448 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/components/icons/IconTwitter.tsx b/src/components/icons/IconTwitter.tsx
@@ -0,0 +1,13 @@
+import { BaseIcon, type IconProps } from "./BaseIcon";
+
+// This SVG code is derived from FontAwesome (https://fontawesome.com/icons/twitter)
+export default function IconTwitter(props: IconProps) {
+  return (
+    <BaseIcon viewBox="0 0 512 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+      />
+    </BaseIcon>
+  );
+}
diff --git a/src/pages/overlay/components/overlay/welcome/Welcome.tsx b/src/pages/overlay/components/overlay/welcome/Welcome.tsx
@@ -1,9 +1,9 @@
-import website from "../../../../../assets/welcome/website.png";
-import amazonWishlist from "../../../../../assets/welcome/amazonWishlist.png";
-import instagram from "../../../../../assets/welcome/instagram.png";
-import tiktok from "../../../../../assets/welcome/tiktok.png";
-import twitter from "../../../../../assets/welcome/twitter.png";
-import gitHub from "../../../../../assets/welcome/github.png";
+import IconGlobe from "../../../../../components/icons/IconGlobe";
+import IconAmazon from "../../../../../components/icons/IconAmazon";
+import IconInstagram from "../../../../../components/icons/IconInstagram";
+import IconTikTok from "../../../../../components/icons/IconTikTok";
+import IconTwitter from "../../../../../components/icons/IconTwitter";
+import IconGitHub from "../../../../../components/icons/IconGitHub";
 
 import Card from "../../card/Card";
 
@@ -29,44 +29,49 @@ export default function Welcome(props: OverlayOptionProps) {
             href="https://www.alveussanctuary.org/"
             rel="noreferrer"
             target="_blank"
+            title="Website"
           >
-            <img src={website} alt="Website" />
+            <IconGlobe size={32} />
           </a>
         </li>
         <li>
           <a
             href="https://smile.amazon.com/hz/wishlist/ls/ZM472JRT5QXG"
             rel="noreferrer"
             target="_blank"
+            title="Amazon Wishlist"
           >
-            <img src={amazonWishlist} alt="Amazon Wishlist" />
+            <IconAmazon size={32} />
           </a>
         </li>
         <li>
           <a
             href="https://www.instagram.com/alveussanctuary/"
             rel="noreferrer"
             target="_blank"
+            title="Instagram"
           >
-            <img src={instagram} alt="Instagram" />
+            <IconInstagram size={32} />
           </a>
         </li>
         <li>
           <a
             href="https://www.tiktok.com/@alveussanctuary"
             rel="noreferrer"
             target="_blank"
+            title="TikTok"
           >
-            <img src={tiktok} alt="TikTok" />
+            <IconTikTok size={32} />
           </a>
         </li>
         <li>
           <a
             href="https://twitter.com/AlveusSanctuary"
             rel="noreferrer"
             target="_blank"
+            title="Twitter"
           >
-            <img src={twitter} alt="Twitter" />
+            <IconTwitter size={32} />
           </a>
         </li>
       </ul>
@@ -77,8 +82,8 @@ export default function Welcome(props: OverlayOptionProps) {
         rel="noreferrer"
         target="_blank"
       >
-        Contribute to the Extension
-        <img src={gitHub} alt="GitHub" />
+        Contribute on GitHub
+        <IconGitHub size={16} />
       </a>
     </Card>
   );

diff --git a/src/pages/overlay/components/overlay/welcome/welcome.module.scss b/src/pages/overlay/components/overlay/welcome/welcome.module.scss
@@ -9,21 +9,23 @@
   align-items: center;
   justify-content: center;
   gap: 1rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
 
   li {
     list-style: none;
-    transition: $transition;
-    transition-property: scale;
+    transition: $transition scale;
 
     &:hover {
       scale: 1.2;
+
+      a {
+        color: $outline-color;
+      }
     }
 
     a {
-      img {
-        height: 2rem;
-      }
+      color: $primary-text;
+      transition: $transition color;
     }
   }
 }
@@ -45,8 +47,4 @@
   &:hover {
     color: $outline-color;
   }
-
-  img {
-    height: 1.5rem;
-  }
 }