User page: Use image for flag

app/components/Flag.tsx

@@ -1,3 +1,17 @@
-export function Flag({ countryCode }: { countryCode: string }) {
-  return <div className={`twf twf-${countryCode.toLowerCase()}`} />;
+import clsx from "clsx";
+
+export function Flag({
+  countryCode,
+  tiny = false,
+}: {
+  countryCode: string;
+  tiny?: boolean;
+}) {
+  return (
+    <div
+      className={clsx(`twf twf-${countryCode.toLowerCase()}`, {
+        "twf-s": tiny,
+      })}
+    />
+  );
 }

app/routes/u.$identifier.tsx

@@ -93,7 +93,6 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     country:
       countryObj && user.country
         ? {
-            emoji: countryObj.emoji,
             code: user.country,
             name:
               translatedCountry({

app/routes/u.$identifier/index.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import invariant from "tiny-invariant";
 import { Avatar } from "~/components/Avatar";
 import { Badge } from "~/components/Badge";
+import { Flag } from "~/components/Flag";
 import { TwitchIcon } from "~/components/icons/Twitch";
 import { TwitterIcon } from "~/components/icons/Twitter";
 import { YouTubeIcon } from "~/components/icons/YouTube";
@@ -37,7 +38,7 @@ export default function UserInfoPage() {
         </h2>
         {data.country ? (
           <div className="u__country">
-            <span className="u__country-emoji">{data.country.emoji}</span>{" "}
+            <Flag countryCode={data.country.code} tiny />{" "}
             <span className="u__country-name" data-testid="country">
               {data.country.name}
             </span>

app/styles/u.css

@@ -27,7 +27,7 @@
 .u__country {
   display: flex;
   align-items: center;
-  gap: var(--s-1);
+  gap: var(--s-1-5);
   grid-area: country;
   line-height: 0.75;
 }
@@ -37,10 +37,6 @@
   font-weight: var(--bold);
 }
 
-.u__country-emoji {
-  font-size: var(--fonts-lg);
-}
-
 .u__socials {
   display: flex;
   justify-content: center;