lucide icons

components/CopyButton/CopyButton.module.css

@@ -1,4 +1,5 @@
 .button {
+  color: var(--colors-mediumDark);
   line-height: 1px;
   cursor: pointer;
 }

components/CopyButton/CopyButton.tsx

@@ -4,7 +4,7 @@ import { forwardRef, useState, useEffect } from "react";
 import innerText from "react-innertext";
 import copy from "copy-to-clipboard";
 import clsx from "clsx";
-import { FiClipboard, FiCheck } from "react-icons/fi";
+import { ClipboardIcon, CheckIcon } from "lucide-react";
 import type { ReactNode, Ref, ComponentPropsWithoutRef, ElementRef, MouseEventHandler } from "react";
 
 import styles from "./CopyButton.module.css";
@@ -57,7 +57,11 @@ const CopyButton = (
       className={clsx(styles.button, copied && styles.copied, className)}
       {...rest}
     >
-      {copied ? <FiCheck className={styles.icon} /> : <FiClipboard className={styles.icon} />}
+      {copied ? (
+        <CheckIcon size="1.25em" className={styles.icon} />
+      ) : (
+        <ClipboardIcon size="1.25em" className={styles.icon} />
+      )}
     </button>
   );
 };

components/Footer/Footer.module.css

@@ -21,8 +21,8 @@
   color: var(--colors-mediumDark) !important;
 }
 
-.link.hover:hover,
-.link.hover:focus-visible {
+.link:has(.icon):hover,
+.link:has(.icon):focus-visible {
   color: var(--colors-medium) !important;
 }
 
@@ -32,7 +32,7 @@
 }
 
 .link.underline:hover,
-.link.hover:focus-visible {
+.link.underline:focus-visible {
   border-bottom-color: var(--colors-kindaLight);
 }
 
@@ -41,7 +41,7 @@
   width: 1.25em;
   height: 1.25em;
   vertical-align: -0.25em;
-  margin: 0 0.075em;
+  margin: 0 0.1em;
 }
 
 .heart {

components/Footer/Footer.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
+import { HeartIcon } from "lucide-react";
 import Link from "../Link";
-import { GoHeartFill } from "react-icons/go";
-import { SiNextdotjs } from "react-icons/si";
 import config from "../../lib/config/constants";
 import type { ComponentPropsWithoutRef } from "react";
 
@@ -28,7 +27,7 @@ const Footer = ({ className, ...rest }: FooterProps) => {
         <div>
           Made with{" "}
           <span className={styles.heart} title="Love">
-            <GoHeartFill className={styles.icon} style={{ strokeWidth: 2 }} />
+            <HeartIcon size="1.25em" fill="currentColor" className={styles.icon} />
           </span>{" "}
           and{" "}
           <Link
@@ -36,9 +35,20 @@ const Footer = ({ className, ...rest }: FooterProps) => {
             title="Powered by Next.js"
             aria-label="Next.js"
             plain
-            className={clsx(styles.link, styles.hover)}
+            className={styles.link}
           >
-            <SiNextdotjs className={styles.icon} />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              stroke="currentColor"
+              strokeWidth="0"
+              viewBox="0 0 24 24"
+              height="1.25em"
+              width="1.25em"
+              className={styles.icon}
+            >
+              <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"></path>
+            </svg>
           </Link>
           .{" "}
           <Link

components/HeadingAnchor/HeadingAnchor.tsx

@@ -1,5 +1,5 @@
 import Link from "../Link";
-import { FiLink } from "react-icons/fi";
+import { LinkIcon } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
 
 export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
@@ -9,8 +9,8 @@ export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof Link>, "hr
 
 const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => {
   return (
-    <Link href={`#${id}`} title={`Jump to "${title}"`} aria-hidden plain style={{ lineHeight: 1 }} {...rest}>
-      <FiLink size="0.8em" />
+    <Link href={`#${id}`} title={`Jump to "${title}"`} aria-hidden plain {...rest}>
+      <LinkIcon size="0.8em" />
     </Link>
   );
 };

components/Menu/Menu.tsx

@@ -6,6 +6,7 @@ import MenuItem from "../MenuItem";
 import ThemeToggle from "../ThemeToggle";
 import { menuItems } from "../../lib/config/menu";
 import type { ComponentPropsWithoutRef } from "react";
+import type { LucideIcon } from "lucide-react";
 
 import styles from "./Menu.module.css";
 
@@ -28,7 +29,7 @@ const Menu = ({ className, ...rest }: MenuProps) => {
       })}
 
       <li className={styles.menuItem}>
-        <MenuItem icon={ThemeToggle} />
+        <MenuItem icon={ThemeToggle as LucideIcon} />
       </li>
     </ul>
   );

components/MenuItem/MenuItem.tsx

@@ -1,15 +1,15 @@
 import clsx from "clsx";
 import Link from "../Link";
 import type { Route } from "next";
-import type { IconType } from "react-icons";
 import type { ComponentPropsWithoutRef } from "react";
+import type { LucideIcon } from "lucide-react";
 
 import styles from "./MenuItem.module.css";
 
 export type MenuItemProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
   text?: string;
   href?: Route;
-  icon?: IconType;
+  icon?: LucideIcon;
   current?: boolean;
 };
 
@@ -18,7 +18,7 @@ const MenuItem = ({ text, href, icon, current, className, ...rest }: MenuItemPro
 
   const item = (
     <>
-      {Icon && <Icon className={styles.icon} />}
+      {Icon && <Icon size="1.25em" className={styles.icon} />}
       {text && <span className={styles.label}>{text}</span>}
     </>
   );

components/PageTitle/PageTitle.module.css

@@ -1,21 +1,14 @@
 .title {
   margin-top: 0;
   margin-bottom: 0.6em;
-  font-size: 1.9em;
-  font-weight: 600;
+  font-size: 2em;
+  font-weight: 500;
   text-transform: lowercase;
-  letter-spacing: 0.02em;
 }
 
 .slug::before {
   content: "\002E\002F"; /* "./" */
   letter-spacing: 0.1em;
-  color: var(--colors-mediumLight) !important;
+  color: var(--colors-mediumLight);
   margin-right: -0.1em;
 }
-
-@media (max-width: 768px) {
-  .title {
-    font-size: 2em;
-  }
-}

components/ThemeToggle/ThemeToggle.tsx

@@ -1,16 +1,15 @@
 "use client";
 
 import { useHasMounted, useTheme } from "../../hooks";
-import { FiSun, FiMoon } from "react-icons/fi";
-import { BsThreeDots } from "react-icons/bs";
+import { EllipsisIcon, MoonIcon, SunIcon } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
+import type { LucideIcon } from "lucide-react";
 
 import styles from "./ThemeToggle.module.css";
 
-export type ThemeToggleProps = {
-  className?: string;
-};
+export type ThemeToggleProps = ComponentPropsWithoutRef<LucideIcon>;
 
-const ThemeToggle = ({ className }: ThemeToggleProps) => {
+const ThemeToggle = ({ ...rest }: ThemeToggleProps) => {
   const hasMounted = useHasMounted();
   const { theme, setTheme } = useTheme();
 
@@ -18,7 +17,7 @@ const ThemeToggle = ({ className }: ThemeToggleProps) => {
   if (!hasMounted) {
     return (
       <div className={styles.toggle}>
-        <BsThreeDots className={className} style={{ fill: "var(--colors-mediumLight)" }} />
+        <EllipsisIcon style={{ stroke: "var(--colors-mediumLight)" }} {...rest} />
       </div>
     );
   }
@@ -30,7 +29,7 @@ const ThemeToggle = ({ className }: ThemeToggleProps) => {
       title={theme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
       aria-label={theme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
     >
-      {theme === "light" ? <FiSun className={className} /> : <FiMoon className={className} />}
+      {theme === "light" ? <SunIcon {...rest} /> : <MoonIcon {...rest} />}
     </button>
   );
 };