feat: Move from FontAwesome to astro-icons + iconify

Using: https://www.astroicon.dev
This commit is contained in:
BuyMyMojo 2024-12-20 17:34:57 +11:00
parent 9aacacef87
commit 2a4ea33de0
7 changed files with 554 additions and 78 deletions

View file

@ -5,30 +5,32 @@ const github = "https://github.com/BuyMyMojo";
const steam = "https://steamcommunity.com/profiles/76561198227003516";
const bsky = "https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn";
const bskyArchive = "https://buymymojo.net/bsky/";
import { Icon } from 'astro-icon/components'
---
<h1>Places to find and/or contact me:</h1>
<ul class="list-disc p-4">
<li>
<a href={bsky} class="p-1" target="_blank"
><i class="fa-brands fa-bluesky"></i> Bluesky</a
><Icon name="meteor-icons:bluesky" class={"svg-inline"} /> Bluesky</a
> - <button id="bskypid"
>@femgo.buymymojo.net (Click to copy DID)</button
>
</li>
<li>
<a href={discord} target="_blank"
><i class="fa-brands fa-discord"></i> Discord</a
><Icon name="meteor-icons:discord" class={"svg-inline"}/> Discord</a
> - @buymymojo
</li>
<li>
<a href={github} target="_blank"
><i class="fa-brands fa-github"></i> GitHub</a
><Icon name="meteor-icons:github" class={"svg-inline"}/> GitHub</a
> - @BuyMyMojo
</li>
<li>
<a href={steam} target="_blank"
><i class="fa-brands fa-steam"></i> Steam</a
><Icon name="tabler:brand-steam" class={"svg-inline"}/> Steam</a
> - @BuyMyMojo
</li>
</ul>
@ -47,16 +49,6 @@ const bskyArchive = "https://buymymojo.net/bsky/";
</li>
</ul>
<style is:global>
/* Declare a custom CSS class to make the icon look right */
.svg-inline--fa {
overflow: visible;
box-sizing: content-box;
display: inline-block;
height: 1em;
vertical-align: -0.125em;
}
</style>
<script>
const bskypid = document.querySelector("#bskypid");