Social Icon media include severla icons, but in order to reduce repetition on style, you could map like this example:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import {
faXTwitter,
faLinkedinIn,
faGithub,
faAngellist,
faMedium,
} from '@fortawesome/free-brands-svg-icons';
const SocialMediaBar = () => {
const GITHUB_URL = 'https://github.com/Diegogagan2587'
const LINKEDIN_URL = 'https://www.linkedin.com/in/diego-vidal-lopez/'
const TWITTER_URL = 'https://twitter.com/dieg02587'
const ANGELLIST_URL = 'https://wellfound.com/u/diego-vidal-lopez'
const MEDIUM_URL = 'https://medium.com/@diego27796gagan'
return (
<div id="social-media" className='flex flex-col gap-4'>
<span className="text-base font-medium text-[#7F8CFF]">
LET'S CONNECT
</span>
<ul className="h-5 flex gap-5 items-center text-xl text-[#505F79]">
{[
{ url: GITHUB_URL, icon: faGithub },
{ url: LINKEDIN_URL, icon: faLinkedinIn },
{ url: TWITTER_URL, icon: faXTwitter },
{ url: ANGELLIST_URL, icon: faAngellist },
{ url: MEDIUM_URL, icon: faMedium },
{ url: 'mailto:[email protected]', icon: faEnvelope },
].map((item, index) => (
<li
key={index}
className='hover:drop-shadow-2xl hover:scale-125 active:animate-ping transition-transform duration-300'
>
<a href={item.url} target='_blank' rel='noreferrer'>
<FontAwesomeIcon icon={item.icon} />
</a>
</li>
))}
</ul>
</div>
);
};
export default SocialMediaBar;