remove twemoji icon dependency

components/ContactForm/ContactForm.tsx

@@ -3,7 +3,7 @@ import { Formik, Form, Field } from "formik";
 import TextareaAutosize from "react-textarea-autosize";
 import Link from "../Link";
 import Captcha from "../Captcha";
-import { SendIcon, CheckOcticon, XOcticon } from "../Icons";
+import { CheckOcticon, XOcticon } from "../Icons";
 import { styled, css } from "../../lib/styles/stitches.config";
 import type { FormikHelpers } from "formik";
 
@@ -85,11 +85,10 @@ const SubmitButton = styled("button", {
   },
 });
 
-const SubmitIcon = styled(SendIcon, {
-  width: "1.2em",
-  height: "1.2em",
-  verticalAlign: "-0.2em",
-  marginRight: "0.4em",
+const SubmitIcon = styled("span", {
+  fontSize: "1.3em",
+  marginRight: "0.3em",
+  lineHeight: 1,
 });
 
 const Result = styled("div", {
@@ -274,7 +273,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
                 <span>Sending...</span>
               ) : (
                 <>
-                  <SubmitIcon /> <span>Send</span>
+                  <SubmitIcon>📤</SubmitIcon> <span>Send</span>
                 </>
               )}
             </SubmitButton>

components/Footer/Footer.tsx

@@ -56,28 +56,27 @@ const ViewSourceLink = styled(Link, {
   },
 });
 
-const beat = keyframes({
-  "0%": { transform: "scale(1)" },
-  "2%": { transform: "scale(1.25)" },
-  "4%": { transform: "scale(1)" },
-  "6%": { transform: "scale(1.2)" },
-  "8%": { transform: "scale(1)" },
-  // pause for ~9 out of 10 seconds
-  "100%": { transform: "scale(1)" },
-});
-
-const Heart = styled("span", {
-  display: "inline-block",
-  animation: `${beat} 10s infinite`,
-  animationDelay: "7.5s",
-  willChange: "transform",
-});
-
 const Icon = styled("svg", {
   width: "1.25em",
   height: "1.25em",
   verticalAlign: "-0.25em",
   margin: "0 0.075em",
+  fill: "currentColor",
+});
+
+const Heart = styled("span", {
+  display: "inline-block",
+  color: "$error", // somewhat ironically color the heart with the themed "error" red... </3
+  animation: `${keyframes({
+    "0%": { transform: "scale(1)" },
+    "2%": { transform: "scale(1.25)" },
+    "4%": { transform: "scale(1)" },
+    "6%": { transform: "scale(1.2)" },
+    "8%": { transform: "scale(1)" },
+    // pause for ~9 out of 10 seconds
+    "100%": { transform: "scale(1)" },
+  })} 10s ease 7.5s infinite`,
+  willChange: "transform",
 });
 
 export type FooterProps = ComponentProps<typeof Wrapper>;
@@ -110,7 +109,7 @@ const Footer = ({ ...rest }: FooterProps) => (
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Icon as={NextjsLogo} fill="currentColor" />
+          <Icon as={NextjsLogo} />
         </NextjsLink>
         .{" "}
         <ViewSourceLink

components/Icons/index.ts

@@ -16,13 +16,10 @@ export { default as ViewsIcon } from "../../node_modules/feather-icons/dist/icon
 export { default as CheckOcticon } from "../../node_modules/@primer/octicons/build/svg/check-16.svg";
 export { default as ClipboardOcticon } from "../../node_modules/@primer/octicons/build/svg/paste-16.svg";
 export { default as ForkOcticon } from "../../node_modules/@primer/octicons/build/svg/repo-forked-16.svg";
+export { default as HeartIcon } from "../../node_modules/@primer/octicons/build/svg/heart-fill-16.svg";
 export { default as OctocatOcticon } from "../../node_modules/@primer/octicons/build/svg/mark-github-16.svg";
 export { default as StarOcticon } from "../../node_modules/@primer/octicons/build/svg/star-16.svg";
 export { default as XOcticon } from "../../node_modules/@primer/octicons/build/svg/x-16.svg";
 
-// emoji from Twemoji: https://twemoji.twitter.com/
-export { default as HeartIcon } from "../../node_modules/twemoji/assets/svg/2764.svg";
-export { default as SendIcon } from "../../node_modules/twemoji/assets/svg/1f4e4.svg";
-
 // simple icons: https://simpleicons.org/
 export { default as NextjsLogo } from "../../node_modules/simple-icons/icons/nextdotjs.svg";