Add Ko-Fi socialIcon to Starlight

[fio-ki]

What version of starlight are you using?

0.32.3

What is your idea?

I've noticed many social media icons are included with Starlight, but ko-fi is missing. Requesting to add this to the library of icons.

Why is this feature necessary?

Ko-fi is an important tool / social media for creators similar to Patreon (Patreon already has an icon included). It belongs in the Starlight icon library.

Do you have examples of this feature in other projects?

https://coreui.io/icons/brand/ko-fi/

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Hey @fio-ki — would be happy to receive a PR adding this icon!

We have also been thinking a bit about social link support (like we have for Patreon currently) and decided to rethink how we do social links a bit to make this more flexible instead of having only a limited set of icons available for them. I’ve opened #3025 to do that, which would mean all we need is the icon added to Starlight for it to be used as a social link.

While waiting for that PR to be reviewed and released, I’d recommend using an override to add the Ko-fi icon as an SVG:

---
import Default from '@astrojs/starlight/components/SocialIcons.astro';
---

<!-- Custom icon link -->
<a href="https://ko-fi.com/..." rel="me" class="sl-flex">
	<span class="sr-only">Ko-fi</span>
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" viewBox="0 0 32 32">
		<path fill="currentColor" d="M31.8 12c-1-5.5-6.4-6.2-6.4-6.2H1c-.8 0-1 1-1 1v15.8c.3 3.3 3.5 3.6 3.5 3.6h16c3.2-.6 3.5-3.5 3.5-5 5.8.3 9.9-3.8 8.8-9.3zm-14.7 4.6c-1.7 2-5.4 5.3-5.4 5.3s-.1.2-.4 0h-.1c-.6-.7-4.5-4.1-5.4-5.3-1-1.3-1.4-3.6-.1-5 1.3-1.3 4-1.4 5.8.5 0 0 2-2.3 4.6-1.2 2.6 1 2.5 4 1 5.7m8.2.7h-2.2V9.7h2.3s2.7.7 2.7 3.5c0 2.6-1.3 3.6-2.8 4z"/>
	</svg>
</a>
<!-- Built-in icon links -->
<Default><slot /></Default>

<style>
	/* Styles to match the default icon links */
	a {
		color: var(--sl-color-text-accent);
		padding: 0.5em;
		margin: -0.5em;
	}
	a:hover {
		opacity: 0.66;
	}
  /* Size the SVG to match built-in icons */
  svg {
    width: 1em;
    height: 1em;
  }
</style>