Update TwitterIcon.tsx

src/Icons/Social Icons/TwitterIcon.tsx

@@ -1,33 +1,11 @@
 import { FC } from 'react';
 
 const TwitterIcon: FC = () => {
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox="0 0 25 25"
-      fill="none"
-      stroke="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_6_19)">
-        <path
-          d="M23.2018 3.00999C23.2018 3.00999 21.1838 4.20199 20.0618 4.53999C19.4595 3.84751 18.6591 3.35669 17.7688 3.13392C16.8785 2.91116 15.9413 2.96719 15.0839 3.29445C14.2264 3.62171 13.4902 4.2044 12.9748 4.96371C12.4593 5.72303 12.1895 6.62233 12.2018 7.53999V8.53999C10.4444 8.58556 8.70306 8.19581 7.13279 7.40544C5.56253 6.61507 4.2121 5.44863 3.20178 4.00999C3.20178 4.00999 -0.798218 13.01 8.20178 17.01C6.14231 18.408 3.68894 19.1089 1.20178 19.01C10.2018 24.01 21.2018 19.01 21.2018 7.50999C21.2018 7.23199 21.1738 6.95399 21.1218 6.67999C22.1418 5.67399 23.2018 3.00999 23.2018 3.00999Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_6_19">
-          <rect
-            width="24"
-            height="24"
-            fill="white"
-            transform="translate(0.201782)"
-          />
-        </clipPath>
-      </defs>
+ return (
+    <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 431.20337 389.76843" aria-hidden="true" height="1em" width="1em">  
+    <g transform="translate(227.98816,51.751688)">
+        <path  d="m 111.60976,-51.751688 h 66.12063 L 33.276384,113.35018 203.21522,338.01675 H 70.154418 L -34.0636,201.75742 -153.31262,338.01675 h -66.16064 L -64.965148,161.42136 -227.98816,-51.751688 H -91.549341 L 2.6545805,72.7943 Z M 88.403591,298.43991 H 125.04177 L -111.45749,-14.253875 h -39.31665 z"/>
+    </g>
     </svg>
   );
 };

src/components/Event.tsx

@@ -1,11 +1,9 @@
 import { getDateTime } from '@/lib/helper';
 import { EventInterface } from '@/lib/types';
-
 import ButtonLink from '@/components/links/ButtonLink';
+import TwitterIcon from "@/Icons/Social Icons/TwitterIcon";
 import IconLink from '@/components/links/IconLink';
-
 import { useSocialIcons } from '@/Icons/Social Icons';
-
 import { FC } from 'react';
 
 interface Props {
@@ -16,7 +14,6 @@ const Event: FC<Props> = ({
   event: { description, link, socials, themes, startTime, endTime, title },
 }) => {
   const socialIcons = useSocialIcons();
-
   return (
     <div className="card flex flex-col p-6 hover:-translate-y-1">
       {/* date */}
@@ -28,13 +25,25 @@ const Event: FC<Props> = ({
         <span className="block flex-1 text-2xl font-bold">{title}</span>
         <span className="flex gap-2">
           {socials.map((social) => (
+
+            ( social.name === 'twitter'?(
             <IconLink
+              key={social.name}
+              variant="outline"
+              href={social.link}
+              icon={TwitterIcon}
+              aria-label={`Visit us on ${social.name}`}
+            />):
+            (
+              <IconLink
               key={social.name}
               variant="outline"
               href={social.link}
               icon={socialIcons[social.name]}
               aria-label={`Visit us on ${social.name}`}
             />
+            )
+            )
           ))}
         </span>
       </div>

src/components/layout/Footer.tsx

@@ -4,14 +4,14 @@ import Logo from '../Logo';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FC, useContext } from 'react';
-import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai';
+import { AiOutlineGithub } from 'react-icons/ai';
+import TwitterIcon from "@/Icons/Social Icons/TwitterIcon";
 import { BsDiscord } from 'react-icons/bs';
 
 const Footer: FC = () => {
   const { theme } = useContext(SettingsContext);
   const router = useRouter();
   if (router.pathname === '/dashboard') return null;
-
   return (
     <section
       className={`pt-1 md:pt-10 ${
@@ -104,7 +104,7 @@ const Footer: FC = () => {
               <li className="mt-[-3.5rem]">
                 <Link
                   href="https://github.com/UniKonf/vibey"
-                  className="p-3 text-center text-3xl hover:text-gray-200"
+                  className="p-3 text-center text-3xl hover:text-gray-400"
                   target="_blank"
                   aria-label="Visit us on GitHub"
                 >
@@ -118,7 +118,7 @@ const Footer: FC = () => {
                   target="_blank"
                   aria-label="Visit us on Twitter"
                 >
-                  <AiOutlineTwitter aria-hidden="true" />
+                  <TwitterIcon/>
                 </Link>
               </li>
               <li className="mt-[-3rem]">

src/components/links/IconLink.tsx

@@ -7,15 +7,16 @@ import UnstyledLink, {
 import * as React from 'react';
 import { IconType } from 'react-icons';
 
+type CustomIconComponent = React.FC<React.SVGProps<SVGSVGElement>>;
 const IconLinkVariant = ['primary', 'outline'] as const;
-
 type IconLinkProps = {
   isDarkBg?: boolean;
   variant?: (typeof IconLinkVariant)[number];
-  icon?: IconType;
+  icon?: IconType | CustomIconComponent;
   iconClassName?: string;
 } & Omit<UnstyledLinkProps, 'children'>;
 
+
 const IconLink = React.forwardRef<HTMLAnchorElement, IconLinkProps>(
   (
     { className, icon: Icon, variant = 'primary', iconClassName, ...rest },
@@ -51,10 +52,18 @@ const IconLink = React.forwardRef<HTMLAnchorElement, IconLinkProps>(
         )}
         {...rest}
       >
-        {Icon && <Icon className={clsxm(iconClassName)} />}
+        {Icon && typeof Icon === 'object' ? (
+          // Custom icon component
+          <Icon className={clsxm(iconClassName)} />
+        ) : (
+          // react-icons component
+          Icon && <Icon className={clsxm(iconClassName)} />
+        )}
       </UnstyledLink>
     );
   }
 );
 
+
+
 export default IconLink;