Change X to Feather Icon

Author: aster-void

src/components/GlobalFooter.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import React from "react";
 import { Link } from "gatsby";
+import { FaXTwitter } from "react-icons/fa6";
 import ActionButton from "./ActionButton";
 import Logo from "./Logo";
 
@@ -9,7 +10,7 @@ function FooterSection({
   links,
 }: {
   title: string;
-  links: { title: string; to: string }[];
+  links: { title: string | JSX.Element; to: string }[];
 }) {
   return (
     <div>
@@ -74,7 +75,7 @@ export default function GlobalFooter({ className }: { className?: string }) {
                 to: "https://first-programming.utcode.net/",
               },
               { title: "GitHub", to: "https://github.com/ut-code" },
-              { title: "𝕏", to: "https://twitter.com/utokyo_code" },
+              { title: <FaXTwitter />, to: "https://twitter.com/utokyo_code" },
             ]}
           />
         </div>

src/pages/contact.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { StaticImage } from "gatsby-plugin-image";
+import { FaXTwitter } from "react-icons/fa6";
 import GlobalFooter from "../components/GlobalFooter";
 import GlobalHeader from "../components/GlobalHeader";
 import CommonHead from "../components/CommonHead";
@@ -34,7 +35,7 @@ export default function ContactPage() {
           <p>ut.code(); へのお問い合わせは、各種 SNS をご利用ください。</p>
           <p className="not-prose flex gap-4">
             <ActionButton to="https://twitter.com/utokyo_code">
-              𝕏 (旧 Twitter)
+              <FaXTwitter /> (旧 Twitter)
             </ActionButton>
             <ActionButton to="https://line.me/ti/p/%40nlr3843e">
               LINE

src/pages/index.tsx

@@ -6,6 +6,7 @@ import {
   FiBox,
   FiMessageSquare,
 } from "react-icons/fi";
+import { FaXTwitter } from "react-icons/fa6";
 import { StaticImage } from "gatsby-plugin-image";
 import GlobalHeader from "../components/GlobalHeader";
 import ActionButton from "../components/ActionButton";
@@ -188,7 +189,7 @@ export default function IndexPage({ data }: PageProps<Queries.IndexPageQuery>) {
               { title: "構成人数", content: "20 名程度 (アクティブ)" },
               { title: "部室", content: "駒場キャンパス学生会館 313B 教室" },
               {
-                title: "𝕏",
+                title: <FaXTwitter />,
                 content: "@utokyo_code",
                 link: "https://x.com/utokyo_code",
               },

src/templates/member.tsx

@@ -5,6 +5,7 @@ import nullthrows from "nullthrows";
 import Color from "color";
 import clsx from "clsx";
 import { FiGithub, FiGlobe } from "react-icons/fi";
+import { FaXTwitter } from "react-icons/fa6";
 import GlobalHeader from "../components/GlobalHeader";
 import GlobalFooter from "../components/GlobalFooter";
 import CommonHead from "../components/CommonHead";
@@ -66,9 +67,9 @@ export default function MemberPage({
                     target="_blank"
                     className={socialButtonClassName}
                     rel="noreferrer"
-                    aria-label="𝕏 (旧 Twitter) を見る"
+                    aria-label="X (旧 Twitter) を見る"
                   >
-                    𝕏
+                    <FaXTwitter />
                   </a>
                 )}
                 {data.mdx?.frontmatter?.website && (