Add social icon support

[jimmybisenius]

Add social icon link type.

[benkaiser]

@jimmybisenius is this to add social icons underneath the link list? Or icons on the links themselves?

[jimmybisenius]

Adding icons to the links themselves @benkaiser! Could be customized with CSS though, or left without labels and inlined to go beneath/above your link list.

[sayhijordy]

If anyone wants a quick fix while a more conventional way is coded you can add this to the top of styles/globals.css: @import url('https://use.fontawesome.com/releases/v6.0.0/css/all.css');

and add this at the bottom:

.fa-brands {
    float: left;
}

.link-name {
    display: block;
}

add this to pages/index.tsx around line 69:

if(link?.type === 'vanilla' && link?.label === 'Instagram')
return (
<a href={link.content ?? '#' }
    className='shadow hover:scale-105 duration-300 ease-in-out flex flex-col w-full text-center px-3 py-5 mb-3 bg-white text-black text-lg font-medium rounded-lg link-name'
    key={link?.id}>
    <i class="fa-brands fa-instagram fa-2x"></i>
    <span>{link?.label}</span>
</a>)
if(link?.type === 'vanilla' && link?.label === 'Spotify')
return (
<a href={link.content ?? '#' }
    className='shadow hover:scale-105 duration-300 ease-in-out flex flex-col w-full text-center px-3 py-5 mb-3 bg-white text-black text-lg font-medium rounded-lg link-name'
    key={link?.id}>
    <i className="fa-brands fa-spotify fa-2x"></i>
    <span>{link?.label}</span>
</a>)
if(link?.type === 'vanilla' && link?.label === 'Soundcloud')
return (
<a href={link.content ?? '#' }
    className='shadow hover:scale-105 duration-300 ease-in-out flex flex-col w-full text-center px-3 py-5 mb-3 bg-white text-black text-lg font-medium rounded-lg link-name'
    key={link?.id}>
    <i class="fa-brands fa-soundcloud fa-2x"></i>
    <span>{link?.label}</span>
</a>)
if(link?.type === 'vanilla' && link?.label === 'YouTube')
return (
<a href={link.content ?? '#' }
    className='shadow hover:scale-105 duration-300 ease-in-out flex flex-col w-full text-center px-3 py-5 mb-3 bg-white text-black text-lg font-medium rounded-lg link-name'
    key={link?.id}>
    <i class="fa-brands fa-youtube fa-2x"></i>
    <span>{link?.label}</span>
</a>)
if(link?.type === 'vanilla' && link?.label === 'Apple Music')
return (
<a href={link.content ?? '#' }
    className='shadow hover:scale-105 duration-300 ease-in-out flex flex-col w-full text-center px-3 py-5 mb-3 bg-white text-black text-lg font-medium rounded-lg link-name'
    key={link?.id}>
    <i class="fa-brands fa-apple fa-2x"></i>
    <span>{link?.label}</span>
</a>)

Make sure whatever you name your vanilla link matches what's written here: link?.type === 'vanilla' && link?.label === 'Apple Music'

Adding new social media icons is as simple as looking up the class code over here: https://fontawesome.com/v6/icons/search?s=solid

[jimmybisenius]

I'm going to open a PR with this code for a new link type named Font Awesome later today or tomorrow. Thank you for your contribution @sayhijordy, feel free to add yourself to the readme (or I can)!

[sayhijordy]

So for some reason I'm struggling with Font Awesome working in Safari, which includes iOS. I ended up using ionicons instead. For any social media icons that aren't available I just used a custom image of my own. For example, for some reason they don't have Instagram.

I pushed a branch called social-icons. You can find it here: https://github.com/sayhijordy/Singlelink/tree/social-icons

Here's an image of how it looks:

[sayhijordy]

I ended up going back to font-awesome. I integrated react-fontawesome to support social icons for Instagram, GitHub, Twitter, Facebook, Twitch, Spotify, Soundcloud, YouTube, TikTok, and Apple Music when typed into label. It would be nice if this was a little bit more user friendly. Maybe doing it like Linktree where they let you select an icon of your choosing would be better. That's a bit outside my expertise, though.

[jimmybisenius]

I will take a look into adding icon selection, this looks great! Thank you!!!!