component :: Social Media Links

The .socialMedia component consists of an unordered list of links to social media accounts and their corresponding icons.

File Name	class	Source
`component.socialMedia.css`	`.socialMedia`	Github

The following 4 sizes and 19 icons (18 social media platforms + 1 generic link icon) are available out of the box.

Platform	Icon
Unknown URL
Discord
Facebook
Github
Instagram
Linkedin
Pinterest
Reddit
Snapchat
Telegram
Tiktok
X
Youtube
Twitch
Odysee
Minds
Substack
Bitchute
Bastyon

HTML

Available modifiers	Description
`.socialMedia`	Default - 24px
`.socialMedia` + `.socialMedia-md`	32px
`.socialMedia` + `.socialMedia-lg`	44px
`.socialMedia` + `.socialMedia-xl`	64px

When using the HTML component you’ll need to include the SVG icons “manually.” All the icons are available on Github. If you’d like to use different icons, Lucide is a great resource.

Astro component

The Astro component (Github) takes 3 props:

Prop	Type	Default	Description
`urls`	`array`	`[]`	An array of social media urls.
`size`	`string`	undefined	`md`, `lg`, `xl`.
`extraClass`	`string`	undefined	Additional CSS, useful for helper classes.

Examples

---
import SocialMedia from "../../components/SocialMedia.astro";
---
<SocialMedia
  urls={[
    "https://www.instagram.com/amandaoleander/",
    "https://www.tiktok.com/@samdoesarts",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

---
import SocialMedia from "../../components/SocialMedia.astro";
---
<SocialMedia
  size="lg"
  urls={[
    "https://x.com/_yannb_",
    "https://github.com/minimaldesign",
    "https://www.youtube.com/@ProkoTV",
  ]}
/>

HTML examples

<ul class="socialMedia">
  <li>
    <a href="https://www.instagram.com/amandaoleander/" title="Instagram" target="_blank" rel="noopener noreferrer" aria-label="https://www.instagram.com/amandaoleander/">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://www.tiktok.com/@samdoesarts" title="Tiktok" target="_blank" rel="noopener noreferrer" aria-label="https://www.tiktok.com/@samdoesarts">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://www.youtube.com/@ProkoTV" title="YouTube" target="_blank" rel="noopener noreferrer" aria-label="https://www.youtube.com/@ProkoTV">
     <svg>[…]</svg>
    </a>
  </li>
</ul>

<ul class="socialMedia socialMedia-xl">
  <li>
    <a href="https://x.com/_yannb_" title="X" target="_blank" rel="noopener noreferrer" aria-label="https://x.com/_yannb_">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://github.com/minimaldesign" title="Github" target="_blank" rel="noopener noreferrer" aria-label="https://github.com/minimaldesign">
     <svg>[…]</svg>
    </a>
  </li>
  <li>
    <a href="https://www.youtube.com/@ProkoTV" title="YouTube" target="_blank" rel="noopener noreferrer" aria-label="https://www.youtube.com/@ProkoTV">
     <svg>[…]</svg>
    </a>
  </li>
</ul>