React Beauty Flags
React Beauty Flags és una llibreria de React que proporciona més de 250 banderes SVG fetes a mà — des de països fins a ciutats — dissenyades per aportar color i estil a les interfícies modernes.
Nascuda de la frustració amb alternatives avorrides o massa complicades, se centra en la simplicitat, l’harmonia visual i l’experiència del desenvolupador.
Motivació
Després de reutilitzar banderes en desenes de projectes, em vaig adonar que les solucions existents eren massa pesades o mancaven de consistència en el disseny. Inspirat pels visuals nets i divertits de Duolingo, vaig decidir dissenyar un conjunt que es veiés bé en qualsevol interfície moderna i que fos fàcil d’utilitzar per als desenvolupadors.
“Volia alguna cosa prou elegant per a portafolis però prou senzilla per posar-la en producció.”
El resultat és una llibreria que ja s’ha descarregat més de 1.000 vegades (i sumant!) a través de NPM, amb una forta adopció entre els desenvolupadors centrats en la IU i els entusiastes del codi obert.
Punts destacats
- +250 banderes fetes a mà - Països, ciutats i símbols dissenyats a Figma.
- Lleuger i ràpid - Zero dependències externes, SVGs optimitzats.
- Personalitzable - Admet utilitats de Tailwind per a vores, ombres i radis.
- Cerca i filtratge - Experiència de cerca integrada amb URLs compartibles.
- Llest per a TypeScript - Totalment tipat, amb autocompleció al teu IDE.
Detalls Tècnics
Per a desenvolupadors i ments curioses
🧰 Piló tecnològic
| Eina | Propòsit |
|---|---|
| React | Llibreria principal per renderitzar components |
| TypeScript | Tipat estàtic i fiabilitat del codi |
| Tailwind CSS | Estils basats en utilitats per al lloc web de demostració |
| API de Figma | Obtenir i sincronitzar dissenys de banderes vectorials |
| svgo | Optimització d’SVG per a una càrrega ràpida |
| GitHub Actions | Automatització de CI/CD per a la construcció i publicació a NPM |
🗂️ Estructura de la llibreria
├── src
│ ├── components/ # Components de les banderes
│ ├── data/ # Metadades i enums de les banderes
│ ├── scripts/ # Scripts d'automatització (get-figma, build-flags, check-flags)
│ └── index.ts # Punt d'entrada de l'exportació
├── website/ # Lloc web de mostra fet amb Next.js
├── .github/workflows # Pipelines de CI/CD
└── package.json⚙️ Scripts d’automatització
get-figma.ts - Obté els SVGs de Figma mitjançant l’API i els emmagatzema localment.
const response = await fetch(`${FIGMA_API_BASE}/files/${fileKey}`, {
headers: { 'X-Figma-Token': FIGMA_API_TOKEN! },
});
const flagsPage = fileData.document.children.find(
(page: any) => page.name === 'Flags' && page.type === 'CANVAS'
);build-flags.ts - Optimitza els SVGs amb svgo, genera components de React i enums.
check-flags.ts - Valida la consistència de les banderes i les metadades que falten.
🚀 Flux de treball de CI/CD
Cada pujada a main activa les GitHub Actions per:
- Obtenir les últimes banderes de Figma
- Construir i optimitzar els actius
- Publicar una nova versió del paquet a NPM
- Desplegar el lloc de demostració a Vercel automàticament
Aquest flux de treball garanteix que la llibreria estigui sempre actualitzada i es desplegui en menys de 2 minuts.
Vista general del lloc web
El lloc web oficial — construït amb Next.js i TailwindCSS — mostra totes les banderes amb filtratge en viu, previsualitzacions i còpia instantània de codi. Cada bandera inclou:
- Personalització interactiva (radi, vora, ombra)
- Còpia al porta-retalls amb classes de Tailwind predefinides
- Enllaços profunds mitjançant URL per compartir-los fàcilment
Lliçons i impacte
Construir React Beauty Flags ha reforçat el meu interès en les eines per a desenvolupadors i el disseny centrat en l’experiència del desenvolupador (DX). Automatitzar els canals d’actius amb les APIs de TypeScript i Figma ha millorat el meu flux de treball, estalviant més de 10 hores d’actualitzacions manuals de banderes per versió.
El projecte també ha impulsat col·laboracions d’altres desenvolupadors, que han aportat dissenys i nous scripts.
Els petits detalls fan que el programari sigui deliciós — i les banderes, sorprenentment, en són un d’ells.
Plans de futur
- Afegir banderes d’organitzacions mundials i esdeveniments
- Estendre les funcions d’utilitat (paletes de colors, coincidència de codi)
- Afegir analítiques sobre l’ús de les banderes
- Millorar les metadades d’accessibilitat
Enllaços
