From 39ddbd1bfcb7fad22b33102360683e7234d61cb1 Mon Sep 17 00:00:00 2001
From: Svemat <jakob.helgesson@gmail.com>
Date: Fri, 29 Sep 2023 18:32:08 +0000
Subject: [PATCH] Fix X Icon

---
 blog/src/components/DynLink.tsx              |  7 ++-----
 blog/src/components/XIcon.tsx                | 18 ++++++++++++++++++
 blog/src/components/navbar/HamburgerMenu.tsx |  5 ++---
 blog/src/components/post/PostFooter.tsx      |  5 ++---
 4 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 blog/src/components/XIcon.tsx

diff --git a/blog/src/components/DynLink.tsx b/blog/src/components/DynLink.tsx
index 051caf9..a84d208 100644
--- a/blog/src/components/DynLink.tsx
+++ b/blog/src/components/DynLink.tsx
@@ -1,9 +1,8 @@
-import Image from 'next/image';
 import Link from 'next/link';
 import { FC } from 'react';
 import { FiExternalLink, FiMail, FiYoutube } from 'react-icons/fi';
 
-import xLogo from '../../public/icons/x.svg';
+import { XIcon } from './XIcon';
 
 export const DynLink: FC<{ href: string }> = ({ href, ...properties }) => {
     const isExternal = href.startsWith('http');
@@ -23,9 +22,7 @@ export const DynLink: FC<{ href: string }> = ({ href, ...properties }) => {
         <span className="text-ens-blue not-prose m-0 gap-1 p-0 hover:underline">
             <span className="inline-flex pr-0.5 text-xs">
                 {isYoutube && <FiYoutube />}
-                {isTwitter && (
-                    <Image src={xLogo} alt="X" className="block h-3 w-3" />
-                )}
+                {isTwitter && <XIcon className="block h-3 w-3" />}
                 {isEmail && <FiMail />}
             </span>
             <Link
diff --git a/blog/src/components/XIcon.tsx b/blog/src/components/XIcon.tsx
new file mode 100644
index 0000000..30b88f6
--- /dev/null
+++ b/blog/src/components/XIcon.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+export const XIcon: FC<{ className?: string }> = ({ className }) => {
+    return (
+        <svg
+            viewBox="0 0 1200 1227"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+            width={'1em'}
+            height={'1em'}
+        >
+            <path
+                d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+};
diff --git a/blog/src/components/navbar/HamburgerMenu.tsx b/blog/src/components/navbar/HamburgerMenu.tsx
index 50170bd..50e1d3a 100644
--- a/blog/src/components/navbar/HamburgerMenu.tsx
+++ b/blog/src/components/navbar/HamburgerMenu.tsx
@@ -1,11 +1,10 @@
-import Image from 'next/image';
 import Link from 'next/link';
 import { FC } from 'react';
 import { FaDiscord, FaYoutube } from 'react-icons/fa';
 import { FiGithub, FiMessageCircle } from 'react-icons/fi';
 
-import xLogo from '../../../public/icons/x.svg';
 import { CrossSVG, MenuSVG } from '../ClientIcons';
+import { XIcon } from '../XIcon';
 
 const links = [
     { name: 'ENS Manager', to: 'https://app.ens.domains' },
@@ -16,7 +15,7 @@ const links = [
 
 const socials = [
     {
-        icon: <Image src={xLogo} className="w-5" alt="text-neutral-400" />,
+        icon: <XIcon className="w-5 text-neutral-400" />,
         to: 'https://twitter.com/ensdomains',
     },
     { icon: <FiGithub />, to: 'https://github.com/ensdomains' },
diff --git a/blog/src/components/post/PostFooter.tsx b/blog/src/components/post/PostFooter.tsx
index 293ccbe..a8100fa 100644
--- a/blog/src/components/post/PostFooter.tsx
+++ b/blog/src/components/post/PostFooter.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import clsx from 'clsx';
-import Image from 'next/image';
 import { FaFacebookF, FaLinkedin } from 'react-icons/fa';
 
 import { BlogPostMetadata } from '@/types/BlogPostMetadata';
 
-import xLogo from '../../../public/icons/x.svg';
 import { Author } from '../Author';
 import { BigTag } from '../tags/BigTag';
+import { XIcon } from '../XIcon';
 
 export const PostFooter = ({ post }: { post: BlogPostMetadata }) => {
     return (
@@ -29,7 +28,7 @@ export const PostFooter = ({ post }: { post: BlogPostMetadata }) => {
                         rel="noopener noreferrer"
                         className="flex w-5 items-center"
                     >
-                        <Image src={xLogo} alt="X logo" />
+                        <XIcon />
                     </a>
                     <a
                         href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(