diff --git a/components/Footer.tsx b/components/Footer.tsx
index 53c658fba4b2..94032b311286 100644
--- 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,7 +29,7 @@ export default function Footer(props: { url: URL }) {
Blog
-
+
-
+
-
+
-
-
+
+
@@ -114,7 +116,7 @@ export default function Header(
)}
aria-label="Notifications"
>
-
+
Notifications
diff --git a/components/Icons.tsx b/components/Icons.tsx
deleted file mode 100644
index b3c600408528..000000000000
--- a/components/Icons.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-// Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import type { JSX } from "preact";
-
-export function GitHub(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-export function Discord(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-// Copied from https://iconmonstr.com/facebook-4-svg/
-export function Facebook() {
- return (
-
- );
-}
-
-// Copied from https://iconmonstr.com/linkedin-3-svg/
-export function LinkedIn() {
- return (
-
- );
-}
-
-// Copied from https://iconmonstr.com/reddit-4-svg/
-export function Reddit() {
- return (
-
- );
-}
-
-// Copied from https://iconmonstr.com/twitter-1-svg/
-export function Twitter() {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function Bell(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function CheckCircle(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function XCircle(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function Rss(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function Menu(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function X(props: JSX.SVGAttributes) {
- return (
-
- );
-}
-
-/**
- * Feather icons by @colebemis
- * Licensed as MIT
- * Reuse allowed without attribution
- * {@link https://github.com/feathericons/feather}
- */
-export function Info(props: JSX.SVGAttributes) {
- return (
-
- );
-}
diff --git a/components/Share.tsx b/components/Share.tsx
index 89be19f7556d..50fa389633ce 100644
--- 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`}
>
-
+
-
+
-
+
-
+
);
diff --git a/deno.json b/deno.json
index 6e0d5bd4785c..1fd9a25db4ea 100644
--- a/deno.json
+++ b/deno.json
@@ -32,6 +32,7 @@
"stripe": "./stripe.ts",
"feed": "https://esm.sh/feed@4.2.2",
"kv_oauth": "https://deno.land/x/deno_kv_oauth@v0.2.5/mod.ts",
+ "tabler_icons_tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/",
"@twind/core": "https://esm.sh/@twind/core@1.1.3",
"fresh_charts/": "https://deno.land/x/fresh_charts@0.3.1/"
},
diff --git a/routes/index.tsx b/routes/index.tsx
index 1373416975f2..1eb5b04d6c48 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -13,7 +13,7 @@ import {
} from "@/utils/db.ts";
import { DAY, WEEK } from "std/datetime/constants.ts";
import Head from "@/components/Head.tsx";
-import { Info } from "@/components/Icons.tsx";
+import IconInfo from "tabler_icons_tsx/info-circle.tsx";
import { TabItem } from "@/components/TabsBar.tsx";
const NEEDS_SETUP = Deno.env.get("GITHUB_CLIENT_ID") === undefined ||
@@ -115,7 +115,7 @@ export default async function HomePage(
<>
diff --git a/routes/pricing.tsx b/routes/pricing.tsx
index 1ee5982d1e24..1f84cdc62387 100644
--- a/routes/pricing.tsx
+++ b/routes/pricing.tsx
@@ -10,7 +10,7 @@ import {
} from "@/utils/payments.ts";
import Stripe from "stripe";
import { getUserBySession } from "@/utils/db.ts";
-import { CheckCircle } from "@/components/Icons.tsx";
+import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx";
import Head from "@/components/Head.tsx";
function comparePrices(
@@ -41,15 +41,15 @@ function FreePlanCard() {
Free
-
+
Share
-
+
Comment
-
+
Vote
@@ -91,15 +91,15 @@ function PremiumPlanCard(
{" "}/ {defaultPrice.recurring?.interval}
-
+
Your comments appear first
-
+
Downvoting
-
+
Official pro user badge 🦕
@@ -143,17 +143,17 @@ function EnterprisePricingCard() {
Contact us
-
+
Advanced reporting
-
+
Direct line to{" "}
Andy and{" "}
Asher
-
+
Complimentary Deno merch
diff --git a/routes/submit/index.tsx b/routes/submit/index.tsx
index 3573d35d9df5..43f960f2c967 100644
--- a/routes/submit/index.tsx
+++ b/routes/submit/index.tsx
@@ -9,7 +9,8 @@ import {
} from "@/utils/db.ts";
import { redirect } from "@/utils/redirect.ts";
import Head from "@/components/Head.tsx";
-import { CheckCircle, XCircle } from "@/components/Icons.tsx";
+import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx";
+import IconCircleX from "tabler_icons_tsx/circle-x.tsx";
import { SignedInState } from "@/utils/middleware.ts";
export const handler: Handlers = {
@@ -62,15 +63,15 @@ export default function SubmitPage(props: PageProps) {
-
+
Don't post duplicate content
-
+
Don't share dummy or test posts
-
+
Do include a description with your title.
diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx
index 029ad73454b0..8cebc0a47826 100644
--- a/routes/users/[login].tsx
+++ b/routes/users/[login].tsx
@@ -11,7 +11,7 @@ import {
getUser,
} from "@/utils/db.ts";
import { pluralize } from "@/utils/display.ts";
-import { GitHub } from "@/components/Icons.tsx";
+import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
import { LINK_STYLES } from "@/utils/constants.ts";
import Head from "@/components/Head.tsx";
import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
@@ -37,7 +37,7 @@ function Profile(
class={LINK_STYLES}
target="_blank"
>
-
+