From 768257c286e901b915ca5aafe17626946958dc13 Mon Sep 17 00:00:00 2001
From: jpbeldomenico <jpbeldomenico@gmail.com>
Date: Thu, 11 Jun 2026 23:58:09 -0300
Subject: [PATCH] Replace flagcdn.com with local flag-icons package

---
 app/package.json            |  3 ++-
 app/src/app/layout.tsx      |  1 +
 app/src/components/Flag.tsx | 14 +++++---------
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/package.json b/app/package.json
index 909a8d7..9df7bb9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -25,7 +25,8 @@
     "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "flag-icons": "^7.2.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.6",
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index 71b8141..d6223c1 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import 'flag-icons/css/flag-icons.min.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
diff --git a/app/src/components/Flag.tsx b/app/src/components/Flag.tsx
index 9913af4..7b21c1d 100644
--- a/app/src/components/Flag.tsx
+++ b/app/src/components/Flag.tsx
@@ -8,18 +8,14 @@ interface FlagProps {
 }
 
 export function Flag({ isoCode, name, size = 32, className = '' }: FlagProps) {
-  const width = size * 1.5
+  const width  = Math.round(size * 1.5)
   const height = size
 
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={`https://flagcdn.com/w${width}/${isoCode}.png`}
-      alt={name ? `Bandera de ${name}` : isoCode}
-      width={width}
-      height={height}
-      className={`object-cover rounded-sm ${className}`}
-      style={{ width, height }}
+    <span
+      className={`fi fi-${isoCode.toLowerCase()} ${className}`}
+      title={name}
+      style={{ width, height, display: 'inline-block', backgroundSize: 'cover', borderRadius: 2 }}
     />
   )
 }