fix flags on Windows

maslianok · maslianok · commit 0ccf2c2dcca5 · 2025-07-08T21:59:08.000+02:00
diff --git a/app/components/flag-emoji-polyfill.tsx b/app/components/flag-emoji-polyfill.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill';
+import { useEffect } from 'react';
+
+export function FlagEmojiPolyfill() {
+  useEffect(() => {
+    polyfillCountryFlagEmojis();
+  }, []);
+
+  return null;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,6 +8,8 @@ import { ThemeProvider } from '@/components/theme-provider/theme-provider';
 import { Toaster } from '@/components/ui/sonner';
 import { PostHogClientOnlyProvider } from '@/lib/posthog/post-hog-client-only';
 
+import { FlagEmojiPolyfill } from './components/flag-emoji-polyfill';
+
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -21,11 +23,15 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.className} antialiased`}>
+      <body
+        className="antialiased"
+        style={{ ...inter.style, fontFamily: `'Twemoji Country Flags', ${inter.style.fontFamily}` }}
+      >
         <SessionProvider>
           <PostHogClientOnlyProvider>
             <NuqsAdapter>
               <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+                <FlagEmojiPolyfill />
                 <div className="flex flex-col min-h-screen">
                   <div className="flex-grow">{children}</div>
                   <Footer />
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "country-flag-emoji-polyfill": "^0.1.8",
     "date-fns": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.525.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
