Bandeiras Dos Paises

Como usar bandeiras dos países em projetos web sem errar

Você provavelmente já viu aquele componente bonito com um pequeno ícone de bandeira ao lado do nome de cada país num select ou numa lista. A maioria dos devs pega os primeiros resultados do Google, aplica em tamanho fixo de 32 por 24 pixels e segue a vida. É aqui que tudo dá errado. O problema real com bandeiras dos paises não é encontrar as imagens. O problema é que cada bandeira tem uma proporção diferente e a maioria das bibliotecas ignora isso. O Brasil é 7 por 10, o Canadá é 1 por 2, a Suíça é 1 por 1. Se você usar uma lib genérica que força todas as bandeiras para quadradas, a Suíça vai parecer um retângulo esticado e o Canadá vai virar um quadro quase quadrado. Eu perdi umas duas horas de debugging num projeto interno porque o cliente reclamou que as bandeiras pareciam "erradas" e não conseguia entender por quê até eu perceber que a biblioteca estava escalando cada ícone para caber num container quadrado de 28 por 28.

A melhor fonte para bandeiras dos paises: flagcdn vs banco oficial

Existe uma diferença importante entre usar o conjunto de bandeiras do flagcdn.com e baixar do site da ISO 3166. O flagcdn fornece SVGs limpos, dimensionados corretamente, com nomes de arquivos baseados no código de país (br.svg, us.svg, jp.svg). A desvantagem é que eles às vezes atualizam o design de alguma bandeira e você pode ter versões inconsistentes se não travar o número da release. Já o banco da ISO é mais fiel aos especificações oficiais, mas os arquivos são apenas PNGs em resoluções fixas, o que significa que você precisa de múltiplas variantes para telas retina. Eu sempre uso a branch v2023 do flagcdn no meu projeto atual, travando essa versão no package.json porque a v2024 mudou o formato de algumas bandeiras africanas e quebrou o alinhamento visual num relatório institucional.

Implementação prática: SVG inline versus tag img

Não use tag img para bandeiras em interfaces modernas. SVG inline permite controlar a cor, o tamanho exato e aplicar estilos CSS diretamente. Você pode até variar a opacidade ou adicionar sombras sem precisar de imagens separadas. A desvantagem é que arquivos SVG mais complexos podem aumentar o peso inicial do bundle, embora bandeiras de países geralmente fiquem entre 2 e 8 kilobytes cada. O truque que eu uso é manter um sprite SVG com todas as bandeiras agrupadas num único arquivo e usar <use href="#br"> para referenciá-las. Isso reduz uma requisição HTTP e torna a troca de bandeira instantânea. Funciona bem para listas com até 200 itens. Para tabelas maiores, volte para SVGs individuais porque o navegador gasta memória processando sprites muito grandes.

Proporções que você precisa memorizar

As bandeiras mais problemáticas são aquelas com proporções fora do comum. O Nepal é o único país com formato não retangular, é um triângulo duplo. Se você tentar encaixar numa grade retangular padrão, vai sobrar espaço vazio ou precisar cortar. O Paraguai também tem diferença visual entre as faces frontal e traseira, e a maioria dos conjuntos uma versão. Já o Vaticano é basicamente quadrado enquanto a média das bandeiras nacionais gira em torno de 2 por 3. Se seu layout espera altura fixa, o Vaticano vai parecer pequeno ao lado do Brasil. A solução que adotei foi definir altura baseada na bandeira mais alta (geralmente o Canadá ou o Peru, ambos 1 por 2) e usar object-fit: contain com padding automático para as outras.

Bibliotecas úteis e seus limites

A biblioteca react-svg-flag é boa para React mas só cobre bandeiras nacionais, não territórios dependentes. Se seu app precisa mostrar bandeiras da Criméia ou de Hong Kong, ela não ajuda. Outra opção é o pacote flag-icons do Hagenburger, que tem cobertura mais completa mas depende de classes utilitárias e o CSS embutido pode conflitar com o seu setup de styles. O maior erro que vejo gente cometer é confiar no tamanho do ícone sem verificar a proporção. Configure sempre width e height explícitos baseados na razão da bandeira, nunca deixe o navegador decidir. Para projetos que precisam de alta precisão, como mapas interativos com Leaflet, use o pacote leaflet-flag com os dados GeoJSON do Natural Earth. O tempo de renderização aumenta mas a fidelidade geográfica é importante nesses casos. Se você está fazendo algo simples, tipo uma lista de seleção de país num formulário, o flagcdn com SVG inline resolve em menos de 10 minutos. Para dashboards empresariais com mapas, considere investir tempo num sprite SVG ou num serviço como flagcdn API com cache control. A escolha certa economiza horas de retrabalho quando o produto vai para produção.