Coletando e usando bandeiras dos países da Ásia
Eu precisei montar um painel com todas as bandeiras dos países da Ásia para um projeto de dados. Achei que fosse rápido. Levou mais do que o esperado, principalmente por causa de inconsistências que muita gente não espera. O mercado tem várias fontes, mas nem todas são confiáveis para uso sério. Vou mostrar o que funciona, onde morre o projeto, e um problema específico que eu tive com a ISO 3166-1.
Onde achar paises da asia bandeiras
A fonte mais citada é o projeto langengström/flag-icon-css, que organiza bandeiras em formato SVG com a nomenclatura ISO 3166-1 alpha-2. Você baixa o repositório inteiro ou usa o CDN direto no navegador. A versão mais recente traz cerca de 250 bandeiras, incluindo todas as nações reconhecidas pela ONU e alguns territórios dependentes. Existe também o pacote png-flags do mesmo autor, que entrega as mesmas bandeiras em PNG com fundo transparente. A desvantagem é que PNG emite arquivos maiores e não escala bem em telas retina sem gerar pixelização. O SVG resolve isso nativamente.
Se o seu projeto exige precisão geopolítica, dá uma olhada no country-flag-icons do GitHub. Ele tem uma estrutura de pastas diferente, mais orientada para download individual por código de país. Não é tão famoso, mas a organização é limpa e as bandeiras são fiéis às especificações oficiais.
Configurando no código
Se você for usar o flag-icon-css via CDN, basta adicionar a referência no <head> do HTML e aplicar a classe ao elemento. O markup fica assim: <span class="flag-icon flag-icon-id"></span>
Isso exibe a bandeira da Indonésia. Os tamanhos padrão são 4x3 e 16x9. A maioria das bandeiras asiáticas usa proporção 2:3 ou 1:2. Se o container não respeitar essa proporção, a imagem vai distorcer. Eu perdi duas horas ajustando isso num projeto anterior porque assumi que o CSS faria o trabalho sozinho. Não faz. O container precisa ter a dimensão correta definida explicitamente. Para um loop com todos os países da Ásia, eu uso um array simples com os códigos ISO e renderizo cada item. Em React, por exemplo, mapeio o array e aplico a classe dinâmica. O resultado carrega rápido porque o navegador cacheia os SVGs após o primeiro request.
Um problema que ninguém avisa
Eu estava montando uma tabela comparativa de países asiáticos e precisava exibir as bandeiras lado a lado com dados demográficos. Usei o CDN padrão do flag-icon-css. Quando cheguei na Turquia (tr), a bandeira apareceu corretamente. Quando cheguei no Japão (jp), tudo bem. Até aí sem problemas. O problema veio com a Coreia do Sul (kr). O flag-icon-css usa o código "kr" para a Coreia do Sul, mas em algumas integrações, especialmente com bibliotecas de mapeamento geográfico, o código padrão é "korea,south". A banderia não carregava porque o código não batia. Eu gastei cerca de 40 minutos rastreamento antes de perceber que a inconsistência estava entre os sets de dados, não no repositório de bandeiras em si.
👉 Clique no botão abaixo para saber mais sobre o assunto!
A solução foi criar um mapeador manual: um objeto que traduzia códigos de diferentes fontes para o padrão ISO do repositório de bandeiras. Ficou algo como const mapping = { 'korea,south': 'kr', 'taiwan': 'tw' }. Não é elegante, mas resolve. Para projetos pequenos, você pode simplesmente hardcodar as exceções. Para projetos grandes, vale a pena automatizar essa tradução.
Pitfalls comuns
O primeiro erro que vejo todo mundo cometendo é confiar cegamente na propóção 3:2. A bandeira da Índia, por exemplo, é 2:3. A da Coreia do Sul é 3:2. A do Nepal é a única bandeira nacional que não é retangular — é formada por dois triângulos sobrepostos. Nenhum repositório comum entrega o Nepal como SVG vetorial preciso. Você vai precisar de uma solução customizada ou aceitar uma versão. O segundo erro é usar bandeiras em PNG dentro de um contexto responsivo sem media queries. O navegador vai quebrar o layout em telas pequenas. A solução é usar SVG com width e height em unidades relativas ou fixas, não em pixels absolutos quando o container varia.
O terceiro erro, e esse é o mais chato, é esquecer que alguns países asiáticos têm bandeiras que mudam com o tempo. O Afeganistão mudou três vezes na última década. Se você estiver construindo um painel histórico ou uma ferramenta que requer precisão temporal, as bandeiras estáticas dos repositórios comuns não vão cortar. Nesse caso, você precisa consultar a Flags of the World (fotw.net) e montar sua própria base.
Alternativas quando o óbvio falha
Se o seu projeto exige bandeiras com proporções exatas e versões históricas, o flag-icon-css não é suficiente. Uma alternativa que eu utilizei foi o pacote country-flag-icons, que oferece SVGs com proporções mais próximas das oficiais. Outro caminho é usar a API do restcountries.eu, que retorna dados estruturados incluindo URLs de bandeiras em SVG e PNG, com proporções documentadas. Eu configurei um script que baixa as bandeiras da API e as converte para SVG otimizado usando o SVGO. O resultado foi um conjunto de 48 bandeiras asiáticas com peso médio de 2kb cada, carregando praticamente instantaneamente. Esse processo leva uns 10 minutos para rodar a primeira vez. Depois disso, é só servir os arquivos estáticos.
Se você não quer escrever script nenhum e prefere algo pronto, o simpleflags.com oferece um embed direto por código de país. A qualidade é boa, mas depende de um serviço externo, o que significa que se o domínio cair, suas bandeiras somem. Sempre tenha um fallback local.
Resumo prático
Para a maioria dos projetos, o flag-icon-css via CDN atende. Instale, mapeie os códigos ISO, defina proporções no CSS e ignore o Nepal até precisar dele. Se o Nepal for crítico, use um SVG customizado encontrado em repositórios especializados. Se precisar de precisão histórica, esqueça os pacotes prontos e monte sua própria base a partir de fontes primárias. E sempre, sempre verifique se o código do país que seu sistema usa corresponde ao código que o repositório de bandeiras espera. Essa é a armadilha mais comum e a que mais custa tempo. Para baixar o repositório principal, o link é direto no GitHub: github.com/lipis/flag-icon-css. A instalação via npm é npm install flag-icon-css. A versão CDN está disponível em cdn.jsdelivr.net/npm/flag-icon-css@latest/css/flag-icon.min.css. Teste antes de confiar. Uma bandeira errada num painel de dados passa despercebida até alguém notar.
