refactor: use x/tabler_icons_tsx import (denoland#430)

Easier to maintain than manually copy-pasted SVGs from various sources. --------- Co-authored-by: Asher Gomez <[email protected]>
dreamcatcher-tech · Aug 18, 2023 · 7691438 · 7691438
1 parent 78397f0
commit 7691438
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 314 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -6,7 +6,9 @@ import {
   SITE_BAR_STYLES,
   SITE_NAME,
 } from "@/utils/constants.ts";
-import { Discord, GitHub, Rss } from "./Icons.tsx";
+import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
+import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
+import IconRss from "tabler_icons_tsx/rss.tsx";
 import { getToggledStyles } from "@/utils/display.ts";
 
 export default function Footer(props: { url: URL }) {
@@ -27,23 +29,23 @@ export default function Footer(props: { url: URL }) {
           Blog
         </a>
         <a href="/feed" aria-label="Deno Hunt RSS Feed" class={LINK_STYLES}>
-          <Rss class="h-6 w-6" />
+          <IconRss class="h-6 w-6" />
         </a>
         <a
           href="https://discord.gg/deno"
           target="_blank"
           aria-label="Deno SaaSKit on Discord"
           class={LINK_STYLES}
         >
-          <Discord class="h-6 w-6" />
+          <IconBrandDiscord class="h-6 w-6" />
         </a>
         <a
           href="https://github.com/denoland/saaskit"
           target="_blank"
           aria-label="Deno SaaSKit repo on GitHub"
           class={LINK_STYLES}
         >
-          <GitHub class="h-6 w-6" />
+          <IconBrandGithub class="h-6 w-6" />
         </a>
         <a href="https://fresh.deno.dev">
           <img

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -6,7 +6,9 @@ import {
   SITE_NAME,
 } from "@/utils/constants.ts";
 import { stripe } from "@/utils/payments.ts";
-import { Bell, Menu, X } from "./Icons.tsx";
+import IconX from "tabler_icons_tsx/x.tsx";
+import IconMenu from "tabler_icons_tsx/menu-2.tsx";
+import IconBell from "tabler_icons_tsx/bell.tsx";
 import { cx } from "@twind/core";
 
 export default function Header(
@@ -43,8 +45,8 @@ export default function Header(
             id="nav-toggle-label"
             htmlFor="nav-toggle"
           >
-            <Menu class="w-6 h-6" />
-            <X class="hidden w-6 h-6" />
+            <IconMenu class="w-6 h-6" />
+            <IconX class="hidden w-6 h-6" />
           </label>
         </div>
       </div>
@@ -114,7 +116,7 @@ export default function Header(
           )}
           aria-label="Notifications"
         >
-          <Bell class="hidden sm:block w-6 h-6" />
+          <IconBell class="hidden sm:block w-6 h-6" />
           <div class="sm:hidden">
             Notifications
           </div>

diff --git a/components/Icons.tsx b/components/Icons.tsx
diff --git a/components/Share.tsx b/components/Share.tsx
@@ -1,5 +1,8 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { Facebook, LinkedIn, Reddit, Twitter } from "./Icons.tsx";
+import IconBrandFacebook from "tabler_icons_tsx/brand-facebook.tsx";
+import IconBrandLinkedin from "tabler_icons_tsx/brand-linkedin.tsx";
+import IconBrandReddit from "tabler_icons_tsx/brand-reddit.tsx";
+import IconBrandTwitter from "tabler_icons_tsx/brand-twitter.tsx";
 
 /**
  * Dynamically generates links for sharing the current content on the major social media platforms.
@@ -21,28 +24,28 @@ export default function Share(props: { url: URL; title: string }) {
         target="_blank"
         aria-label={`Share ${props.title} on Facebook`}
       >
-        <Facebook />
+        <IconBrandFacebook />
       </a>
       <a
         href={`https://www.linkedin.com/shareArticle?url=${props.url.href}&title=${props.title}`}
         target="_blank"
         aria-label={`Share ${props.title} on LinkedIn`}
       >
-        <LinkedIn />
+        <IconBrandLinkedin />
       </a>
       <a
         href={`https://reddit.com/submit?url=${props.url.href}&title=${props.title}`}
         target="_blank"
         aria-label={`Share ${props.title} on Reddit`}
       >
-        <Reddit />
+        <IconBrandReddit />
       </a>
       <a
         href={`https://twitter.com/share?url=${props.url.href}&text=${props.title}`}
         target="_blank"
         aria-label={`Share ${props.title} on Twitter`}
       >
-        <Twitter />
+        <IconBrandTwitter />
       </a>
     </div>
   );