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

@ -1,13 +1,7 @@
---
const buttonFormat = "gif";
import { library, icon } from "@fortawesome/fontawesome-svg-core";
import { faCodeBranch, faRss } from "@fortawesome/free-solid-svg-icons";
library.add(faCodeBranch, faRss);
const sourceCodeIcon = icon({ prefix: "fas", iconName: faCodeBranch.iconName });
const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
import { Icon } from 'astro-icon/components'
---
<hr class="h-1" style="" />
@ -15,9 +9,9 @@ const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
<div class="flexrow">
<p>
<a href="https://github.com/BuyMyMojo/aria.coffee" target="_blank"
><Fragment set:html={sourceCodeIcon.html} /> Source Code</a
><Icon name="mdi:source-branch" class={"svg-inline"}/> Source Code</a
> | <a href="https://aria.coffee/rss.xml" target="_blank"
><Fragment set:html={rssIcon.html} /> RSS Feed</a
><Icon name="mdi:rss" class={"svg-inline"}/> RSS Feed</a
>
</p>
</div>

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");