more sensical twemoji-in-js w/ svgr

assets/js/src/contact.js

@@ -2,10 +2,10 @@ import "vanilla-hcaptcha";
 import { h, render } from "preact";
 import { useState } from "preact/hooks";
 import fetch from "unfetch";
-import parseEmoji from "./emoji.js";
 
 // shared react components:
 import { CheckIcon, XIcon } from "@primer/octicons-react";
+import SendEmoji from "twemoji-emojis/vendor/svg/1f4e4.svg";
 
 const CONTACT_ENDPOINT = "/api/contact/";
 
@@ -124,9 +124,9 @@ const ContactForm = () => {
           aria-label="Send Message"
           disabled={sending}
           style={{ display: status.success ? "none" : null }}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: parseEmoji(sending ? "Sending..." : "📤 Send") }}
-        />
+        >
+          <SendEmoji class="emoji" /> {sending ? "Sending..." : "Send"}
+        </button>
 
         <span
           class="contact-form-result"

assets/sass/components/_global.scss

@@ -130,7 +130,6 @@ main {
     margin-top: 0;
     letter-spacing: -0.005em;
 
-    // stylelint-disable-next-line no-descending-specificity
     a {
       // disable fancy underline without `.no-underline`
       color: inherit !important;
@@ -142,7 +141,8 @@ main {
 
 // make SVG twemojis relative to surrounding text
 // https://github.com/twitter/twemoji#inline-styles
-img.emoji {
+img.emoji,
+svg.emoji {
   height: 1.2em;
   width: 1.2em;
   margin: 0 0.05em;
@@ -155,7 +155,7 @@ img.emoji {
 }
 
 // need to manually unset text cursor above when emoji's within a link
-a img.emoji {
+a .emoji {
   cursor: inherit;
 }
 

assets/sass/pages/_contact.scss

@@ -87,7 +87,7 @@ div.layout-contact {
         );
       }
 
-      img.emoji {
+      svg.emoji {
         margin-left: 0;
         margin-right: 0.4em;
         cursor: inherit;