Remove font-awesome

Author: mimorisuzuko

package.json

@@ -10,7 +10,8 @@
     "@mimorisuzuko/yuuka": "1.0.7",
     "next": "15.1.5",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "react-icons": "5.4.0"
   },
   "packageManager": "[email protected]",
   "engines": {

src/app/page.tsx

@@ -1,5 +1,4 @@
 import { Global } from "@mimorisuzuko/yuuka";
-import Script from "next/script";
 import Header from "../components/Header";
 import Profile from "../components/Profile";
 import Publications from "../components/Publications";
@@ -20,7 +19,6 @@ export default function Home() {
 					}
 				}}
 			</Global>
-			<Script src="https://kit.fontawesome.com/9129381b44.js" />
 			<Header />
 			<div
 				css={{

src/components/Profile.tsx

@@ -1,39 +1,51 @@
-import type { ReactNode } from "react";
+import { type CSS, css } from "@mimorisuzuko/yuuka";
+import type { FC, ReactNode } from "react";
+import {
+	RiBriefcase4Fill,
+	RiCake2Fill,
+	RiFacebookBoxFill,
+	RiGithubFill,
+	RiGoogleFill,
+	RiGraduationCapFill,
+	RiHeart3Fill,
+	RiMailFill,
+	RiTwitterXFill
+} from "react-icons/ri";
 
 const items: {
-	iconClassName: string;
+	Icon: FC<{ className: string }>;
 	jsx: ReactNode;
 }[] = [
 	{
-		iconClassName: "fa-solid fa-cake-candles",
+		Icon: RiCake2Fill,
 		jsx: "1995/02/06"
 	},
 	{
-		iconClassName: "fa-solid fa-user-graduate",
+		Icon: RiGraduationCapFill,
 		jsx: "Doctor of Science"
 	},
 	{
-		iconClassName: "fa-solid fa-briefcase",
+		Icon: RiBriefcase4Fill,
 		jsx: "ITANDI Inc."
 	},
 	{
-		iconClassName: "fa-solid fa-envelope",
+		Icon: RiMailFill,
 		jsx: "m(at)mimorisuzu.co"
 	},
 	{
-		iconClassName: "fa-brands fa-x-twitter",
+		Icon: RiTwitterXFill,
 		jsx: <a href="https://x.com/HirokiUsuba">HirokiUsuba</a>
 	},
 	{
-		iconClassName: "fa-brands fa-facebook",
+		Icon: RiFacebookBoxFill,
 		jsx: <a href="https://www.facebook.com/hrky0206">hrky0206</a>
 	},
 	{
-		iconClassName: "fa-brands fa-github",
+		Icon: RiGithubFill,
 		jsx: <a href="https://github.com/mimorisuzuko">mimorisuzuko</a>
 	},
 	{
-		iconClassName: "fa-brands fa-google",
+		Icon: RiGoogleFill,
 		jsx: (
 			<a href="https://scholar.google.co.jp/citations?user=JxA4JoIAAAAJ">
 				Google Scholar
@@ -42,6 +54,15 @@ const items: {
 	}
 ];
 
+const styles = {
+	ul: { listStyle: "none", padding: 0 }
+} as const satisfies { [key: string]: CSS };
+
+const [listIconClassName, ListIconStyle] = css({
+	marginRight: 8,
+	verticalAlign: "middle"
+});
+
 export default function Profile() {
 	return (
 		<div
@@ -93,21 +114,18 @@ export default function Profile() {
 				>
 					Hiroki Usuba / <small>薄羽 大樹</small>
 				</div>
-				<ul className="fa-ul">
-					{items.map(({ iconClassName, jsx }, i) => (
+				<ListIconStyle />
+				<ul css={styles.ul}>
+					{items.map(({ Icon, jsx }, i) => (
 						<li key={i}>
-							<span className="fa-li">
-								<i className={iconClassName} />
-							</span>
+							<Icon className={listIconClassName} />
 							{jsx}
 						</li>
 					))}
 				</ul>
-				<ul className="fa-ul">
+				<ul css={styles.ul}>
 					<li>
-						<span className="fa-li">
-							<i className="fa-solid fa-heart" />
-						</span>
+						<RiHeart3Fill className={listIconClassName} />
 						<a href="https://hibiki-cast.jp/hibiki_f/mimori_suzuko/">
 							Suzuko Mimori
 						</a>

src/components/Publications.tsx

@@ -1,4 +1,6 @@
+import { css } from "@mimorisuzuko/yuuka";
 import type { ReactNode } from "react";
+import { RiFilePdf2Fill, RiNewsFill, RiYoutubeFill } from "react-icons/ri";
 import {
 	type Publication,
 	arxivs,
@@ -10,6 +12,10 @@ import {
 	postersAndDemosInternationalWithReview
 } from "../shared/bibs";
 
+const [iconClassName, IconStyle] = css({
+	verticalAlign: "middle"
+});
+
 const isMe = (name: string) => {
 	return (
 		name === "Usuba, Hiroki" || name === "Hiroki Usuba" || name === "薄羽大樹"
@@ -88,7 +94,7 @@ const renderPublicationEn = ({
 		ret.push(
 			" ",
 			<a href={_miyashitacomurl_} key={_miyashitacomurl_}>
-				[<i className="far fa-file-pdf" />
+				[<RiFilePdf2Fill className={iconClassName} />
 				PDF]
 			</a>
 		);
@@ -167,7 +173,7 @@ const renderJournalEn = ({
 		ret.push(
 			" ",
 			<a href={_miyashitacomurl_} key={_miyashitacomurl_}>
-				[<i className="far fa-file-pdf" />
+				[<RiFilePdf2Fill className={iconClassName} />
 				PDF]
 			</a>
 		);
@@ -234,7 +240,7 @@ const renderPublicationJa = ({
 		ret.push(
 			" ",
 			<a href={_miyashitacomurl_} key={_miyashitacomurl_}>
-				[<i className="far fa-file-pdf" />
+				[<RiFilePdf2Fill className={iconClassName} />
 				PDF]
 			</a>
 		);
@@ -244,7 +250,7 @@ const renderPublicationJa = ({
 		ret.push(
 			" ",
 			<a href={_videourl_} key={_videourl_}>
-				[<i className="fab fa-youtube" />
+				[<RiYoutubeFill className={iconClassName} />
 				Video]
 			</a>
 		);
@@ -254,7 +260,7 @@ const renderPublicationJa = ({
 		ret.push(
 			" ",
 			<a href={_pressrelease_} key={_pressrelease_}>
-				[<i className="fa fa-newspaper" />
+				[<RiNewsFill className={iconClassName} />
 				Press release]
 			</a>
 		);
@@ -318,6 +324,7 @@ export default function Publications() {
 				}
 			}}
 		>
+			<IconStyle />
 			<h3>Journal w/ review</h3>
 			<ol>
 				{journalsWithReview.map((a, i) => {

yarn.lock

@@ -2424,6 +2424,7 @@ __metadata:
     next: "npm:15.1.5"
     react: "npm:19.0.0"
     react-dom: "npm:19.0.0"
+    react-icons: "npm:5.4.0"
     typescript: "npm:5.7.3"
     typescript-eslint: "npm:8.20.0"
   languageName: unknown
@@ -2767,6 +2768,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:5.4.0":
+  version: 5.4.0
+  resolution: "react-icons@npm:5.4.0"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/698b0c4616870152d86de2585fb709bf3eeb9292d971d689965dade5f0ee71cdc92d2125b728ab220cc39a4c6d6bad1ed526b9b934ab39a7b6001bc23b73ee16
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"