octicons weren't being tree-shaken -- import SVGs manually for now

components/clipboard/CopyButton.module.scss

@@ -3,6 +3,7 @@
   top: 0;
   right: 0;
   padding: 0.75em;
+  line-height: 1;
   color: var(--text);
   background-color: var(--background-inner);
   border: 1px solid var(--kinda-light);
@@ -15,6 +16,7 @@
   .octicon {
     width: 16px;
     height: 16px;
+    vertical-align: text-bottom;
   }
 
   .octicon-check {

components/clipboard/CopyButton.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import copy from "copy-to-clipboard";
 import trimNewlines from "trim-newlines";
-import { CopyIcon, CheckIcon } from "@primer/octicons-react";
+import { CopyOcticon, CheckOcticon } from "../icons/octicons";
 
 import styles from "./CopyButton.module.scss";
 
@@ -48,9 +48,9 @@ export default function CopyButton({ content, timeout = 2000 }: Props) {
       disabled={copied}
     >
       {copied ? (
-        <CheckIcon size={16} className={`${styles.octicon} ${styles["octicon-check"]}`} />
+        <CheckOcticon fill="currentColor" className={`${styles.octicon} ${styles["octicon-check"]}`} />
       ) : (
-        <CopyIcon size={16} className={styles.octicon} />
+        <CopyOcticon fill="currentColor" className={styles.octicon} />
       )}
     </button>
   );

components/contact/ContactForm.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
-import { CheckIcon, XIcon } from "@primer/octicons-react";
+import { CheckOcticon, XOcticon } from "../icons/octicons";
-import SendIcon from "../icons/svg/send.svg";
+import { SendIcon } from "../icons";
 
 import styles from "./ContactForm.module.scss";
 
@@ -131,7 +131,7 @@ export default function ContactForm() {
           className={status.success ? styles.result_success : styles.result_error}
           style={{ display: !status.message || sending ? "none" : null }}
         >
-          {status.success ? <CheckIcon size={16} /> : <XIcon size={16} />} {status.message}
+          {status.success ? <CheckOcticon fill="CurrentColor" /> : <XOcticon fill="CurrentColor" />} {status.message}
         </span>
       </div>
     </form>

components/icons/index.ts

@@ -1,51 +1,24 @@
-import BotIcon from "./svg/bot.svg";
+export { default as BotIcon } from "./svg/bot.svg";
-import BulbOffIcon from "./svg/bulb-off.svg";
+export { default as BulbOffIcon } from "./svg/bulb-off.svg";
-import BulbOnIcon from "./svg/bulb-on.svg";
+export { default as BulbOnIcon } from "./svg/bulb-on.svg";
-import ContactIcon from "./svg/contact.svg";
+export { default as ContactIcon } from "./svg/contact.svg";
-import DateIcon from "./svg/date.svg";
+export { default as DateIcon } from "./svg/date.svg";
-import EditIcon from "./svg/edit.svg";
+export { default as EditIcon } from "./svg/edit.svg";
-import FloppyIcon from "./svg/floppy.svg";
+export { default as FloppyIcon } from "./svg/floppy.svg";
-import HeartIcon from "./svg/heart.svg";
+export { default as HeartIcon } from "./svg/heart.svg";
-import HomeIcon from "./svg/home.svg";
+export { default as HomeIcon } from "./svg/home.svg";
-import LaptopIcon from "./svg/laptop.svg";
+export { default as LaptopIcon } from "./svg/laptop.svg";
-import LicenseIcon from "./svg/license.svg";
+export { default as LicenseIcon } from "./svg/license.svg";
-import LockIcon from "./svg/lock.svg";
+export { default as LockIcon } from "./svg/lock.svg";
-import MailIcon from "./svg/mail.svg";
+export { default as MailIcon } from "./svg/mail.svg";
-import NextjsIcon from "./svg/nextjs.svg";
+export { default as NextjsIcon } from "./svg/nextjs.svg";
-import NotesIcon from "./svg/notes.svg";
+export { default as NotesIcon } from "./svg/notes.svg";
-import PrivacyIcon from "./svg/privacy.svg";
+export { default as PrivacyIcon } from "./svg/privacy.svg";
-import ProjectsIcon from "./svg/projects.svg";
+export { default as ProjectsIcon } from "./svg/projects.svg";
-import SendIcon from "./svg/send.svg";
+export { default as SendIcon } from "./svg/send.svg";
-import SirenIcon from "./svg/siren.svg";
+export { default as SirenIcon } from "./svg/siren.svg";
-import TagIcon from "./svg/tag.svg";
+export { default as TagIcon } from "./svg/tag.svg";
-import TapeIcon from "./svg/tape.svg";
+export { default as TapeIcon } from "./svg/tape.svg";
-import ViewsIcon from "./svg/views.svg";
+export { default as ViewsIcon } from "./svg/views.svg";
-import WandIcon from "./svg/wand.svg";
+export { default as WandIcon } from "./svg/wand.svg";
-import WaveIcon from "./svg/wave.svg";
+export { default as WaveIcon } from "./svg/wave.svg";
-
-export {
-  BotIcon,
-  BulbOffIcon,
-  BulbOnIcon,
-  ContactIcon,
-  DateIcon,
-  EditIcon,
-  FloppyIcon,
-  HeartIcon,
-  HomeIcon,
-  LaptopIcon,
-  LicenseIcon,
-  LockIcon,
-  MailIcon,
-  NextjsIcon,
-  NotesIcon,
-  PrivacyIcon,
-  ProjectsIcon,
-  SendIcon,
-  SirenIcon,
-  TagIcon,
-  TapeIcon,
-  ViewsIcon,
-  WandIcon,
-  WaveIcon,
-};

components/icons/octicons.ts

@@ -0,0 +1,6 @@
+export { default as CheckOcticon } from "./octicons/check.svg";
+export { default as CopyOcticon } from "./octicons/copy.svg";
+export { default as ForkOcticon } from "./octicons/fork.svg";
+export { default as OctocatOcticon } from "./octicons/octocat.svg";
+export { default as StarOcticon } from "./octicons/star.svg";
+export { default as XOcticon } from "./octicons/x.svg";

components/icons/octicons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>

components/icons/octicons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>

components/icons/octicons/fork.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>

components/icons/octicons/octocat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>

components/icons/octicons/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>

components/icons/octicons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>

components/mdxComponents.tsx

@@ -5,7 +5,7 @@ import Gist from "react-gist";
 import getNodeText from "../lib/get-node-text";
 import Video from "./video/FullPageVideo";
 import CopyButton from "./clipboard/CopyButton";
-import { MarkGithubIcon } from "@primer/octicons-react";
+import { OctocatOcticon } from "./icons/octicons";
 import type { LinkProps } from "next/link";
 import type { ImageProps } from "next/image";
 import type { ReactPlayerProps } from "react-player";
@@ -73,7 +73,7 @@ const mdxComponents = {
   gist: (props: { id: string; file?: string }) => <Gist {...props} />,
   octocat: (props: { repo: string }) => (
     <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
-      <MarkGithubIcon size={24} verticalAlign="text-top" />
+      <OctocatOcticon verticalAlign="text-top" fill="currentColor" />
       <style jsx>{`
         a {
           margin: 0 0.3em;

components/notes/Meta.tsx

@@ -1,10 +1,7 @@
 import Link from "next/link";
 import { format, parseISO } from "date-fns";
 import Hits from "../hits/Hits";
-import DateIcon from "../icons/svg/date.svg";
+import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
-import TagIcon from "../icons/svg/tag.svg";
-import EditIcon from "../icons/svg/edit.svg";
-import ViewsIcon from "../icons/svg/views.svg";
 import * as config from "../../lib/config";
 
 import styles from "./Meta.module.scss";

components/page-footer/Footer.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
-import HeartIcon from "../icons/svg/heart.svg";
+import { HeartIcon, NextjsIcon } from "../icons";
-import NextjsIcon from "../icons/svg/nextjs.svg";
 import * as config from "../../lib/config";
 
 import styles from "./Footer.module.scss";

components/page-header/Menu.tsx

@@ -1,9 +1,6 @@
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import HomeIcon from "../icons/svg/home.svg";
+import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
-import NotesIcon from "../icons/svg/notes.svg";
-import ProjectsIcon from "../icons/svg/projects.svg";
-import ContactIcon from "../icons/svg/contact.svg";
 
 import styles from "./Menu.module.scss";
 

components/page-header/ThemeToggle.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import * as config from "../../lib/config";
-import BulbOffIcon from "../icons/svg/bulb-off.svg";
+import { BulbOffIcon, BulbOnIcon } from "../icons";
-import BulbOnIcon from "../icons/svg/bulb-on.svg";
 
 import styles from "./ThemeToggle.module.scss";
 

components/projects/RepoCard.module.scss

@@ -40,6 +40,9 @@
 
       .octicon,
       .language_color {
+        width: 16px;
+        height: 16px;
+        vertical-align: text-bottom;
         margin-right: 0.5em;
       }
 
@@ -49,7 +52,7 @@
         height: 1.15em;
         border-radius: 50%;
         position: relative;
-        top: 0.175em;
+        vertical-align: text-top;
       }
     }
   }

components/projects/RepoCard.tsx

@@ -1,5 +1,5 @@
 import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
-import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
+import { StarOcticon, ForkOcticon } from "../icons/octicons";
 
 import styles from "./RepoCard.module.scss";
 
@@ -47,7 +47,7 @@ export default function RepoCard({ name, url, description, language, stars, fork
               target="_blank"
               rel="noopener noreferrer"
             >
-              <StarIcon size={16} className={styles.octicon} />
+              <StarOcticon fill="currentColor" className={styles.octicon} />
               <span>{stars.toLocaleString("en-US")}</span>
             </a>
           </div>
@@ -61,7 +61,7 @@ export default function RepoCard({ name, url, description, language, stars, fork
               target="_blank"
               rel="noopener noreferrer"
             >
-              <RepoForkedIcon size={16} className={styles.octicon} />
+              <ForkOcticon fill="currentColor" className={styles.octicon} />
               <span>{forks.toLocaleString("en-US")}</span>
             </a>
           </div>

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "license": "MIT",
   "homepage": "https://jarv.is/",
+  "sideEffects": false,
   "author": {
     "name": "Jake Jarvis",
     "email": "jake@jarv.is",

pages/birthday.tsx

@@ -3,7 +3,7 @@ import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
 import Video from "../components/video/FullPageVideo";
-import TapeIcon from "../components/icons/svg/tape.svg";
+import { TapeIcon } from "../components/icons";
 
 import thumbnail from "../public/static/images/birthday/thumb.png";
 

pages/cli.tsx

@@ -3,7 +3,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import BotIcon from "../components/icons/svg/tape.svg";
+import { BotIcon } from "../components/icons";
 
 import cliImg from "../public/static/images/cli/screenshot.png";
 

pages/contact.tsx

@@ -2,8 +2,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import PageTitle from "../components/page/PageTitle";
 import ContactForm from "../components/contact/ContactForm";
-import MailIcon from "../components/icons/svg/mail.svg";
+import { MailIcon, LockIcon } from "../components/icons";
-import LockIcon from "../components/icons/svg/lock.svg";
 
 export default function Contact() {
   return (

pages/index.tsx

@@ -3,8 +3,7 @@ import hexRgb from "hex-rgb";
 import isAbsoluteUrl from "is-absolute-url";
 import Layout from "../components/Layout";
 import Container from "../components/Container";
-import WaveIcon from "../components/icons/svg/wave.svg";
+import { WaveIcon, LockIcon } from "../components/icons";
-import LockIcon from "../components/icons/svg/lock.svg";
 
 type ColorLinkProps = {
   children: unknown;

pages/license.tsx

@@ -2,7 +2,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import LicenseIcon from "../components/icons/svg/license.svg";
+import { LicenseIcon } from "../components/icons";
 
 export default function License() {
   return (

pages/previously.tsx

@@ -5,8 +5,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import FloppyIcon from "../components/icons/svg/floppy.svg";
+import { FloppyIcon, SirenIcon } from "../components/icons";
-import SirenIcon from "../components/icons/svg/siren.svg";
 
 import img_wayback from "../public/static/images/previously/wayback.png";
 import img_2002_02 from "../public/static/images/previously/2002_02.png";

pages/privacy.tsx

@@ -4,7 +4,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import PrivacyIcon from "../components/icons/svg/privacy.svg";
+import { PrivacyIcon } from "../components/icons";
 
 import faunaImg from "../public/static/images/privacy/fauna_hits.png";
 

pages/projects.tsx

@@ -3,7 +3,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import PageTitle from "../components/page/PageTitle";
 import RepoCard from "../components/projects/RepoCard";
-import ProjectsIcon from "../components/icons/svg/projects.svg";
+import { ProjectsIcon } from "../components/icons";
 import type { GetStaticProps } from "next";
 
 export default function Projects({ repos }) {

pages/uses.tsx

@@ -4,7 +4,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import LaptopIcon from "../components/icons/svg/laptop.svg";
+import { LaptopIcon } from "../components/icons";
 
 import desktopImg from "../public/static/images/uses/bigsur.png";