Finish migration to astro-icon

QuiltMC · Aug 14, 2024 · c4c4a1c · c4c4a1c · Cozy-GitHub · Aug 16, 2024
1 parent d902ca9
commit c4c4a1c
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 41 deletions.
diff --git a/src/components/atoms/Foldable.astro b/src/components/atoms/Foldable.astro
@@ -1,5 +1,6 @@
 ---
 import Message from "./Message.astro";
+import { Icon } from "astro-icon/components"
 
 export interface Props {
 	id: string;
@@ -17,7 +18,7 @@ const { id } = Astro.props as Props;
 
 			<div class="is-flex-grow-1 mt-1">
 				<a href={`#${id}`} class="is-pulled-right">
-					<i class="fas fa-link" />
+					<Icon name="mdi:link-variant">
 				</a>
 			</div>
 		</summary>

diff --git a/src/components/atoms/LanguageModal.astro b/src/components/atoms/LanguageModal.astro
@@ -1,5 +1,6 @@
 ---
 import i18next, { t } from "i18next";
+import { Icon } from "astro-icon/components"
 
 const langs = [...i18next.languages].sort();
 ---
@@ -26,7 +27,7 @@ const langs = [...i18next.languages].sort();
 						placeholder={t("prompt-search-language")}
 					/>
 					<span class="icon is-small is-left">
-						<i class="fas fa-search"></i>
+						<Icon name="mdi:magnify" />
 					</span>
 				</div>
 				<div id="jump-links" class="columns is-multiline m-2">
@@ -64,7 +65,7 @@ const langs = [...i18next.languages].sort();
 					aria-label="close"
 					for="language-switcher"
 				>
-					<span class="icon"><i class="fas fa-x"></i></span>
+					<span class="icon"><Icon name="mdi:close-circle-outline"></span>
 					<span>{t("button-close")}</span>
 				</label>
 			</div>

diff --git a/src/components/parts/nav/NavLink.astro b/src/components/parts/nav/NavLink.astro
@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components"
 export interface Props {
 	href: string;
 	klass?: string;
@@ -26,7 +27,7 @@ const isActive = isSubpage || href === pageUrl ? "is-active" : "";
 	{
 		icon && (
 			<span class="icon">
-				<i class={`fa-xl ${icon}`} />
+				<Icon name={icon}/>
 			</span>
 		)
 	}

diff --git a/src/components/parts/nav/Search.astro b/src/components/parts/nav/Search.astro
@@ -1,11 +1,12 @@
 ---
+import { Icon } from "astro-icon/components"
 ---
 
 <div id="dummy-search-field" class="field pt-2 pr-4">
     <p class="control has-icons-right">
         <input aria-label="search" class="input" type="text" placeholder="Search" style="border: 0" />
         <span class="icon is-small is-right is-clickable">
-            <i class="fas fa-magnifying-glass"></i>
+            <Icon name="mdi:magnify" />
         </span>
     </p>
 </div>
@@ -16,7 +17,7 @@
             <p class="control has-icons-right is-expanded">
                 <input id="search-field" autocomplete="off" aria-label="search" class="input is-medium" type="text" placeholder="Search" />
                 <span class="icon is-small is-right is-clickable">
-                    <i class="fas fa-magnifying-glass"></i>
+                    <Icon name="mdi:magnify" />
                 </span>
              </p>
         </div>

diff --git a/src/components/parts/sponsors/MoreSponsorRowItem.astro b/src/components/parts/sponsors/MoreSponsorRowItem.astro
@@ -17,6 +17,5 @@ const text = t("button-sponsors", { ns: "home" })
 
 	<span class="icon">
 		<Icon name=`mdi:arrow-${rtl ? "left" : "right"}-thick`/>
-		<!-- <i class={`fas fa-arrow-${rtl ? "left" : "right"}`}></i> -->
 	</span>
 </a>
diff --git a/src/components/parts/team/SystemMembers.astro b/src/components/parts/team/SystemMembers.astro
@@ -2,6 +2,7 @@
 import pkCache from "cache/pk.json";
 import type { SystemMember, PkId, SystemMembers } from "@data/Team";
 import { t } from "i18next";
+import { Icon } from "astro-icon/components"
 
 export interface Props {
 	members: SystemMembers;
@@ -52,7 +53,7 @@ if (members !== "---") {
 				class="has-tooltip-arrow"
 				data-tooltip={t("team:member-list-redacted")}
 			>
-				<i class="fa-2xl pl-1 fas fa-box-heart" />
+				<Icon name="mdi:heart-box-outline" />
 			</div>
 		)
 	}

diff --git a/src/components/parts/team/TeamMember.astro b/src/components/parts/team/TeamMember.astro
@@ -21,7 +21,7 @@ const na = t("team:n-a");
 <div class="card is-team-member">
 	{ isLeader &&
 		<div class="icon is-large is-pulled-right z-60 has-tooltip-arrow" data-tooltip={t("team:team-lead")}>
-			<i class="fas fa-2x fa-star"></i>
+			<Icon name="mdi:star" />
 		</div>
 	}
 	<div class="card-content">

diff --git a/src/components/parts/timeline/Item.astro b/src/components/parts/timeline/Item.astro
@@ -13,7 +13,7 @@ const { id, title, icon } = Astro.props as Props;
 
 <div class="timeline-item">
 	<div class="timeline-marker is-icon is-dark">
-		{icon.startsWith('custom:') ? (<div style="min-width: 1.25em; padding-top: 0.4em; display:inline-block;"><Icon name="pumpkin" /></div>) : (<i class={icon} />)}
+		{icon.startsWith('custom:') ? (<div style="min-width: 1.25em; padding-top: 0.4em; display:inline-block;"><Icon name="pumpkin" /></div>) : (<Icon name={icon} />)}
 	</div>
 
 	<div class="timeline-content">

diff --git a/src/components/setpieces/NavBar.astro b/src/components/setpieces/NavBar.astro
@@ -3,6 +3,7 @@ import { t } from "i18next";
 import Dropdown from "@parts/nav/Dropdown.astro";
 import NavLink from "@parts/nav/NavLink.astro";
 import { localizePath } from "@util/Util";
+import { Icon } from "astro-icon/components"
 import Search from "../parts/nav/Search.astro";
 
 export interface Props {
@@ -30,7 +31,7 @@ const { style = "is-dark" } = Astro.props as Props;
 			for="language-switcher"
 			data-tooltip={t("tooltip-switch-language")}
 		>
-			<i class="fas fa-language fa-2xl"></i>
+			<Icon name="mdi:translate"/>
 		</label>
 
 		<label
@@ -39,11 +40,11 @@ const { style = "is-dark" } = Astro.props as Props;
 			data-tooltip={t("tooltip-toggle-low-contrast")}
 		>
 			<span id="theme-normal-contrast">
-				<i class="fas fa-circle-half-stroke fa-xl"></i>
+				<Icon name="mdi:circle-half-full" />
 			</span>
 
 			<span id="theme-low-contrast">
-				<i class="fal fa-circle-half-stroke fa-xl"></i>
+				<Icon name="mdi:circle-half" />
 			</span>
 		</label>
 
@@ -108,37 +109,37 @@ const { style = "is-dark" } = Astro.props as Props;
 						{t("nav-more-pages")}
 					</span>
 					<span class="icon is-hidden-mobile is-hidden-tablet-only">
-						<i class="fas fa-ellipsis-v fa-xl"></i>
+						<Icon name="mdi:dots-vertical" />
 					</span>
 				</a>
 
 				<div class="navbar-dropdown is-right is-boxed">
-					<NavLink href={localizePath("/mc-patchnotes")} icon="fas fa-notebook">
+					<NavLink href={localizePath("/mc-patchnotes")} icon="mdi:book">
 						{t("nav-page-patch-notes")}
 					</NavLink>
-					<NavLink href={localizePath("/help-wanted")} icon="fas fa-briefcase">
+					<NavLink href={localizePath("/help-wanted")} icon="mdi:briefcase">
 						{t("nav-page-help-wanted")}
 					</NavLink>
-					<NavLink href={localizePath("/sponsors")} icon="fas fa-dollar-sign">
+					<NavLink href={localizePath("/sponsors")} icon="mdi:dollar">
 						{t("nav-page-sponsors")}
 					</NavLink>
 					<NavLink
 						href={localizePath("/staff")}
-						icon="fas fa-clipboard-user"
+						icon="mdi:user-badge-outline"
 						subpage={true}
 					>
 						{t("nav-page-staff-resources")}
 					</NavLink>
-					<NavLink href="/api" icon="fas fa-plug-circle-plus">
+					<NavLink href="/api" icon="mdi:power-plug">
 						{t("nav-page-api-home")}
 					</NavLink>
-					<NavLink href={localizePath("/legal")} icon="fas fa-scale-balanced">
+					<NavLink href={localizePath("/legal")} icon="mdi:scale-balance">
 						{t("nav-page-legal")}
 					</NavLink>
 
 					<div class="divider">{t("divider-external-links")}</div>
 
-					<NavLink href="https://opencollective.com/quiltmc" icon="fas fa-circle-dollar-to-slot">
+					<NavLink href="https://opencollective.com/quiltmc" icon="mdi:dollar">
 						{t("nav-page-donate")}
 					</NavLink>
 				</div>

diff --git a/src/layouts/Generator.astro b/src/layouts/Generator.astro
@@ -1,5 +1,6 @@
 ---
 import Page from "./Page.astro";
+import { Icon } from "astro-icon/components"
 
 const props = Astro.props;
 ---
@@ -28,7 +29,7 @@ const props = Astro.props;
                 <p class="control has-icons-left">
                     <input id="version-search" class="input" placeholder="Search" />
                     <span class="icon is-small is-left">
-                        <i class="fas fa-magnifying-glass"></i>
+                        <Icon name="mdi:magnify" />
                     </span>
                 </p>
             </div>

diff --git a/src/layouts/InstallPage.astro b/src/layouts/InstallPage.astro
@@ -10,6 +10,7 @@ import WipWarning from "@parts/install/WipWarning.astro";
 import rtlSettings from "@data/RtlSettings";
 import { localizePath } from "@util/Util";
 import { t } from "i18next";
+import { Icon } from "astro-icon/components"
 
 export interface Props extends BaseProps {
 	platformKey: string;
@@ -31,7 +32,7 @@ const { left } = rtlSettings();
 					textKey="install:button-back"
 				/>
 				<button class="button is-primary">
-					<span class="icon"><i class="fas fa-ellipsis-h"></i></span>
+					<Icon name="mdi:dots-vertical" />
 					<span>{t("install:button-menu")}</span>
 				</button>
 

diff --git a/src/layouts/LatestVersions.astro b/src/layouts/LatestVersions.astro
@@ -1,5 +1,6 @@
 ---
 import Page from "./Page.astro";
+import { Icon } from "astro-icon/components"
 
 const props = Astro.props;
 ---
@@ -26,7 +27,7 @@ const props = Astro.props;
             <p class="control has-icons-left">
                 <input id="version-search" class="input" placeholder="Search" />
                 <span class="icon is-small is-left">
-                    <i class="fas fa-magnifying-glass"></i>
+                    <Icon name="mdi:magnify" />
                 </span>
             </p>
         </div>
@@ -44,7 +45,7 @@ const props = Astro.props;
 
     <button id="copy-button" class="button">
         <span class="icon">
-            <i class="fas fa-copy"></i>
+            <Icon name="mdi:content-copy" />
         </span>
         <span>Copy to Clipboard</span>
     </button>

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -5,6 +5,7 @@ import i18next, { t } from "i18next";
 import Base from "./Base.astro";
 import SiteConfig from "@data/Site"
 import { cwd } from "process"
+import { Icon } from "astro-icon/components"
 
 const { content } = Astro.props;
 const { title, sidebar = true } = content;
@@ -25,7 +26,7 @@ const githubUrl = SiteConfig.fileEditBaseUrl + Astro.props.frontmatter.file.repl
 					<div class="column is-narrow">
 						<div class="is-hidden-tablet">
 							<label class="button is-primary" for="toggle-sidebar">
-								<span class="icon"><i class="fas fa-ellipsis-h"></i></span>
+								<Icon name="mdi:dots-vertical" />
 								<span>{t("sidebar-pages")}</span>
 							</label>
 							<br />
@@ -52,7 +53,7 @@ const githubUrl = SiteConfig.fileEditBaseUrl + Astro.props.frontmatter.file.repl
 						<p class="subtitle is-italic is-6 has-text-weight-medium is-family-primary mt-5">
 							<span class="icon-text">
 								<span class="icon">
-								   <i class="fas fa-pencil"></i>
+								   <Icon name="mdi:pencil" />
 								</span>
 								<span>
 									<a href={githubUrl} style="color: inherit">{t("edit-on-github")}</a>

diff --git a/src/layouts/PatchNotes.astro b/src/layouts/PatchNotes.astro
@@ -2,6 +2,7 @@
 import Message from "@atoms/Message.astro";
 import { t } from "i18next";
 import Base from "./Base.astro";
+import { Icon } from "astro-icon/components"
 ---
 
 <Base content={Astro.props.content}>
@@ -13,7 +14,7 @@ import Base from "./Base.astro";
 						<div class="is-hidden-tablet">
 							<button class="button is-primary" id="sidebar-button"
 									aria-controls="sidebar-box" aria-haspopup="menu">
-								<span class="icon"><i class="fas fa-ellipsis-h"></i></span>
+								<Icon name="mdi:dots-vertical" />
 								<span>{t("sidebar-versions")}</span>
 							</button>
 
@@ -57,7 +58,7 @@ import Base from "./Base.astro";
 													data-tooltip="Dismiss"
 												>
 													<span class="icon"
-														><i class="fas fa-2x fa-circle-xmark"></i>
+														><Icon name="mdi:close-circle-outline" />
 													</span>
 												</label>
 											</div>

diff --git a/src/layouts/StaffDocument.astro b/src/layouts/StaffDocument.astro
@@ -4,6 +4,7 @@ import Base from "./Base.astro";
 import PageTitle from "@atoms/PageTitle.astro";
 import Sidebar from "@setpieces/Sidebar.astro";
 import { localizePath } from "@util/Util";
+import { Icon } from "astro-icon/components"
 
 export interface Props {
 	title: string;
@@ -58,7 +59,7 @@ if (pageUrl != staffUrl) {
 						<div class="is-hidden-tablet">
 							<button class="button is-primary">
 								<label class="button is-primary" for="toggle-sidebar">
-									<span class="icon"><i class="fas fa-ellipsis-h"></i></span>
+									<Icon name="mdi:dots-vertical" />
 									<span>{t("sidebar-pages")}</span>
 								</label>
 							</button>

diff --git a/src/pages/en/about/faq.mdx b/src/pages/en/about/faq.mdx
@@ -100,7 +100,7 @@ No. Quilt mods are distinct from Fabric mods, and not defined in the same way.
 
 Quilt's first beta released on the 20th of April 2022, and we've been full steam ahead since then!
 
-If you'd like to try Quilt out, please take a look at [the install page](/en/install). [<i class="fas fa-cannabis has-text-dark is-pulled-right"></i>](https://www.youtube.com/watch?v=DJfg39WkMvE)
+If you'd like to try Quilt out, please take a look at [the install page](/en/install).
 
 </Message>