chore: use x icon instead of twitter (#466)

* chore: use x icon instead of twitter

* chore: update

Author: boojack

package.json

@@ -46,6 +46,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
+    "react-icons": "^5.3.0",
     "react-paginate": "^8.2.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-use": "^17.5.1",

pnpm-lock.yaml

@@ -1,10 +1,8 @@
-import Link from '@/components/shared/link';
-import Image from 'next/image';
-
 import clsx from 'clsx';
+import Image from 'next/image';
+import { BsGithub, BsLinkedin } from 'react-icons/bs';
 
-import LinkedInIcon from '@/svgs/linkedin.inline.svg';
-import GitHubIcon from '@/svgs/github.inline.svg';
+import Link from '@/components/shared/link';
 
 const founder = {
   danny: {
@@ -105,17 +103,15 @@ const Founder = ({ id, className }: { id: keyof typeof founder; className?: stri
               <div className="flex items-center">
                 {position}
                 <Link href={linkedin}>
-                  <LinkedInIcon
-                    width={20}
-                    height={20}
-                    className="ml-1 shrink-0 items-center transition-opacity duration-200 hover:opacity-80"
+                  <BsLinkedin
+                    size={16}
+                    className="ml-2 shrink-0 items-center transition-opacity duration-200 hover:opacity-80"
                   />
                 </Link>
                 <Link href={github}>
-                  <GitHubIcon
-                    width={16}
-                    height={16}
-                    className="ml-1 shrink-0 items-center transition-opacity duration-200 hover:opacity-80"
+                  <BsGithub
+                    size={16}
+                    className="ml-2 shrink-0 items-center transition-opacity duration-200 hover:opacity-80"
                   />
                 </Link>
               </div>

src/components/pages/about/meet-crew/founder/founder.tsx

@@ -2,22 +2,22 @@
 
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
+import { BsTwitterX, BsLinkedin } from 'react-icons/bs';
+
 import Link from '@/components/shared/link';
-import TwitterIcon from '@/svgs/twitter.inline.svg';
-import LinkedinIcon from '@/svgs/linkedin.inline.svg';
 import HackerNewsIcon from '@/svgs/hackernews.inline.svg';
 
 const icons = {
   twitter: {
-    Icon: TwitterIcon,
-    className: 'text-secondary-3',
+    Icon: BsTwitterX,
+    className: 'text-gray-40',
     iconClassName: 'h-6 w-6',
     getShareUrl: (text: string, url: string) => {
-      return `https://twitter.com/share?text=${text}&url=${url}`;
+      return `https://x.com/share?text=${text}&url=${url}`;
     },
   },
   linkedIn: {
-    Icon: LinkedinIcon,
+    Icon: BsLinkedin,
     className: 'text-secondary-3',
     iconClassName: 'h-6 w-6',
     getShareUrl: (text: string, url: string) => {
@@ -28,7 +28,7 @@ const icons = {
     Icon: HackerNewsIcon,
     className: 'text-secondary-3',
     // Hacknew news's icon is a bit bigger than others. So we need to make it smaller.
-    iconClassName: 'h-5 w-5',
+    iconClassName: 'h-6 w-6',
     getShareUrl: (text: string, url: string) => {
       return `https://news.ycombinator.com/submitlink?u=${url}&t=${text}`;
     },

src/components/pages/blog/aside/social-links/social-links.tsx

@@ -14,7 +14,7 @@ const Hero = () => {
           <br />
           Want to be notified? Follow us on{' '}
           <Link
-            href={Route.TWITTER}
+            href={Route.X}
             target="_blank"
             className="font-semibold text-primary-1 hover:text-gray-60"
           >

src/components/pages/changelog/hero/hero.tsx

@@ -1,13 +1,11 @@
+import { BsGithub, BsDiscord, BsTwitter } from 'react-icons/bs';
+
 import NextLink from 'next/link';
 
 import clsx from 'clsx';
 
 import Route from '@/lib/route';
 
-import DiscordIcon from '@/svgs/discord.inline.svg';
-import GithubIcon from '@/svgs/github.inline.svg';
-import TwitterIcon from '@/svgs/twitter.inline.svg';
-
 const socials = [
   {
     name: 'Discord',
@@ -19,7 +17,7 @@ const socials = [
     name: 'Twitter',
     description:
       'Latest news and updates. Tag us if you need any help or want to share a feedback.',
-    href: Route.TWITTER,
+    href: Route.X,
     action: 'Follow Us',
   },
   {
@@ -32,9 +30,9 @@ const socials = [
 ];
 
 const icon = {
-  Discord: DiscordIcon,
-  Twitter: TwitterIcon,
-  GitHub: GithubIcon,
+  Discord: BsDiscord,
+  Twitter: BsTwitter,
+  GitHub: BsGithub,
 };
 
 const Icon = ({ name }: { name: keyof typeof icon }) => {

src/components/shared/community/cards/cards.tsx

@@ -1,40 +1,35 @@
+import { BsGithub, BsDiscord, BsTwitterX, BsYoutube, BsLinkedin } from 'react-icons/bs';
+
 import Link from '@/components/shared/link';
 
 import { MENU } from '@/lib/menus';
 import Route from '@/lib/route';
 
-import DiscordIcon from '@/svgs/discord.inline.svg';
-import GithubIcon from '@/svgs/github.inline.svg';
-import TwitterIcon from '@/svgs/twitter.inline.svg';
-import LinkedInIcon from '@/svgs/linkedin.inline.svg';
-import YoutubeIcon from '@/svgs/youtube.inline.svg';
-import LocaleSwitcher from '@/components/locale-switcher';
-
 const socialLinks = [
   {
     name: 'Github',
     href: Route.GITHUB,
-    icon: GithubIcon,
+    icon: BsGithub,
   },
   {
     name: 'Discord',
     href: Route.DISCORD,
-    icon: DiscordIcon,
+    icon: BsDiscord,
   },
   {
     name: 'Twitter',
-    href: Route.TWITTER,
-    icon: TwitterIcon,
+    href: Route.X,
+    icon: BsTwitterX,
   },
   {
     name: 'Youtube',
     href: Route.YOUTUBE,
-    icon: YoutubeIcon,
+    icon: BsYoutube,
   },
   {
     name: 'LinkedIn',
     href: Route.LINKEDIN,
-    icon: LinkedInIcon,
+    icon: BsLinkedin,
   },
 ];
 
@@ -94,8 +89,7 @@ const Footer = () => {
             >
               <span className="sr-only">{name}</span>
               <Icon
-                width={24}
-                height={24}
+                size={24}
                 className="shrink-0 transition-opacity duration-200 hover:opacity-80"
               />
             </Link>

src/components/shared/footer/footer.tsx

@@ -146,7 +146,7 @@ const Route = {
   LIVE_DEMO: 'https://demo.bytebase.com',
   HUB: 'https://hub.bytebase.com/workspace',
   DISCORD: 'https://discord.com/invite/huyw7gRsyA',
-  TWITTER: 'https://twitter.com/Bytebase',
+  X: 'https://x.com/Bytebase',
   YOUTUBE: 'https://www.youtube.com/channel/UCIlxsMmakGxeaAwpu1Z6jJg',
   GITHUB: 'https://github.com/bytebase/bytebase',
   LINKEDIN: 'https://www.linkedin.com/company/bytebase',