Component
Misc
Included with Starter Kit
---
import { twMerge as tw } from 'tailwind-merge';
import site from '@src/site.js';
import Icon from '@components/Icon.astro';
interface Props {
class?: string;
variant?: 'default' | 'round' | 'circle';
except?: string[];
only?: string[];
}
const { class: className, variant = 'default', except, only } = Astro.props;
let socialLinks = Object.entries(site.social) || [];
// Remove links we don't want
if (except) {
socialLinks = socialLinks.filter(([name, url]) => !except.includes(name));
}
// Only include links we want
if (only) {
socialLinks = socialLinks.filter(([name, url]) => only.includes(name));
}
// Colours
const colors = {
facebook: {
default: 'text-facebook',
round: 'bg-facebook text-white hover:text-white',
circle: 'bg-facebook text-white hover:text-white',
},
twitter: {
default: 'text-twitter',
round: 'bg-twitter text-white hover:text-white',
circle: 'bg-twitter text-white hover:text-white',
},
instagram: {
default: 'text-instagram',
round: 'bg-instagram text-white hover:text-white',
circle: 'bg-instagram text-white hover:text-white',
},
linkedin: {
default: 'text-linkedin',
round: 'bg-linkedin text-white hover:text-white',
circle: 'bg-linkedin text-white hover:text-white',
},
youtube: {
default: 'text-youtube',
round: 'bg-youtube text-white hover:text-white',
circle: 'bg-youtube text-white hover:text-white',
},
tiktok: {
default: 'text-tiktok',
round: 'bg-tiktok text-white hover:text-white',
circle: 'bg-tiktok text-white hover:text-white',
},
pinterest: {
default: 'text-pinterest',
round: 'bg-pinterest text-white hover:text-white',
circle: 'bg-pinterest text-white hover:text-white',
},
github: {
default: 'text-github',
round: 'bg-github text-white hover:text-white',
circle: 'bg-github text-white hover:text-white',
},
};
// Style
const variants = {
default: '',
round: 'rounded-lg',
circle: 'rounded-full',
};
---
<ul class={tw('flex flex-wrap items-center gap-3', className)}>
{
socialLinks.map(([name, url]) => {
return (
<li>
<a
class={tw(
'inline-flex items-center justify-center leading-none w-10 h-10 transition transform duration-500 hover:scale-105',
colors[name][variant],
variants[variant]
)}
href={url}
>
<Icon name={name} class="text-lg fill-current" />
<span class="sr-only">{name}</span>
</a>
</li>
);
})
}
</ul>
This component is available with our Astro Starter Kit. You don’t need to copy it.
Supported Sites
As needed, we’ll add more to this list, but for now the sites we usually tend to link to are supported:
- Facebook
- Twitter / X
- Instagram
- LinkedIn
- TikTok
- Youtube
- Pinterest
Usage
Before you use this component, be sure that you’ve added the social media links you need for your site to src/site.js in the following format:
export default {
...otherConfig,
/**
* Social Links
*/
social: {
facebook: 'https://www.facebook.com/',
twitter: 'https://twitter.com/',
instagram: 'https://www.instagram.com/',
linkedin: 'https://www.linkedin.com/',
youtube: 'https://www.youtube.com/',
pinterest: 'https://www.pinterest.com/',
tiktok: 'https://www.tiktok.com/',
},
};
Now you can import the component into the page or component you need it and use it!
---
import SocialLinks from '@components/SocialLinks.astro';
---
<SocialLinks />
Style Variants
You can choose from 3 different styles for the links:
- Default: Coloured icons with no background
- Circle: Coloured circled with icon inside
- Rounded: Coloured rounded square with icon inside
<SocialLinks />
<SocialLinks variant="circle" />
<SocialLinks variant="rounded" />
Including or Excluding Links
By default, all links will be shown. You can specify which links you’d like using the only or except props.
These props accept an array of site names, like this:
<SocialLinks only={['twitter', 'facebook']} />
In this example, the only prop tells the component to display only Twitter and Facebook links.
<SocialLinks except={['twitter', 'facebook']} />
In this example, the except prop tells the component to display all available links, except Twitter and Facebook.