fix: twitter icon -> x icon

fezcode · fezcode · commit 89c41f777e38 · 2026-01-06T14:26:03.000+03:00
For the entire site. Fixes #9
diff --git a/public/site-config.piml b/public/site-config.piml
@@ -17,7 +17,7 @@
       (id) twitter
       (label) TWITTER
       (url) https://x.com/fezcoddy
-      (icon) TwitterLogo
+      (icon) XLogo
 
     > (link)
       (id) linkedin
diff --git a/src/components/ContactModal.jsx b/src/components/ContactModal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   EnvelopeSimpleIcon,
   LinkedinLogoIcon,
-  TwitterLogoIcon,
+  XLogoIcon,
   GithubLogoIcon,
   GlobeIcon,
 } from '@phosphor-icons/react';
@@ -11,7 +11,7 @@ import { useSiteConfig } from '../context/SiteConfigContext';
 
 const socialIcons = {
   GithubLogo: GithubLogoIcon,
-  TwitterLogo: TwitterLogoIcon,
+  XLogo: XLogoIcon,
   LinkedinLogo: LinkedinLogoIcon,
   EnvelopeSimple: EnvelopeSimpleIcon,
 };
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { version } from '../version';
 import {
-  TwitterLogo,
-  GithubLogo,
-  LinkedinLogo,
+  XLogoIcon,
+  GithubLogoIcon,
+  LinkedinLogoIcon,
   Command,
   Terminal,
 } from '@phosphor-icons/react';
@@ -121,11 +121,11 @@ const Footer = () => {
             </h3>
 
             <div className="flex gap-3 mb-8">
-              <SocialIcon href="https://x.com/fezcoddy" icon={TwitterLogo} />
-              <SocialIcon href="https://github.com/fezcode" icon={GithubLogo} />
+              <SocialIcon href="https://x.com/fezcoddy" icon={XLogoIcon} />
+              <SocialIcon href="https://github.com/fezcode" icon={GithubLogoIcon} />
               <SocialIcon
                 href="https://www.linkedin.com/in/ahmed-samil-bulbul/"
-                icon={LinkedinLogo}
+                icon={LinkedinLogoIcon}
               />
             </div>
 
diff --git a/src/components/ShareButtons.jsx b/src/components/ShareButtons.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import {
   FacebookLogoIcon,
-  TwitterLogoIcon,
+  XLogoIcon,
   LinkedinLogoIcon,
   LinkSimpleIcon,
   WhatsappLogoIcon,
@@ -165,7 +165,7 @@ const ShareButtons = ({ title, url }) => {
             className="text-gray-400 hover:text-blue-400 transition-colors"
             aria-label="Share on Twitter"
           >
-            <TwitterLogoIcon size={24} />
+            <XLogoIcon size={24} />
           </button>
           <button
             onClick={() =>
diff --git a/src/pages/about-views/aboutData.js b/src/pages/about-views/aboutData.js
@@ -18,7 +18,7 @@ import {
   GithubLogoIcon,
   LinkedinLogoIcon,
   EnvelopeIcon,
-  TwitterLogoIcon,
+  XLogoIcon,
   GraduationCapIcon,
 } from '@phosphor-icons/react';
 
@@ -48,9 +48,9 @@ export const aboutData = {
         icon: EnvelopeIcon,
       },
       {
-        label: 'Twitter',
+        label: 'X (Twitter)',
         url: 'https://x.com/fezcoddy',
-        icon: TwitterLogoIcon,
+        icon: XLogoIcon,
       },
       { label: 'Fezcode', url: 'https://fezcode.com', icon: GlobeIcon },
     ],
diff --git a/src/utils/appIcons.js b/src/utils/appIcons.js
@@ -80,6 +80,7 @@ import {
   MonitorIcon,
   WindIcon,
   TwitterLogoIcon,
+  XLogoIcon,
   FlaskIcon,
   WavesIcon,
   HeartIcon,
@@ -175,6 +176,7 @@ export const appIcons = {
   MonitorIcon,
   WindIcon,
   TwitterLogoIcon,
+  XLogoIcon,
   FlaskIcon,
   WavesIcon,
   HeartIcon,
