Replace flagcdn.com with local flag-icons package

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",

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'] })
 

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 }}
     />
   )
 }