Projelerimden biri üzerinde çalışırken, ülke koduna bağlı olarak belirli bir bayrağı görüntülemem gereken bir özellik var. İlk yaklaşımım ülke bayraklarının zip dosyasını alıp görüntüler klasöründen yerel olarak çıkarmaktı.
Ülke bayrakları listesini dilerseniz buradan indirebilirsiniz.
Bunun daha kolay olabileceğini düşündüm, ülke bayrakları için bir API olabileceğini araştırdım ve buldum, Country Flags API
Çalışması şu şekilde:
<img src="https://www.countryflags.io/:country_code/:style/:size.png">
Örnek:
<img src="https://www.countryflags.io/be/flat/64.png">
<img src="https://www.countryflags.io/be/shiny/64.png">Temalar
Şu anda iki teması var – düz ve parlak.
Boyutlar
16px geniş bayraklar için 16 ** 24px geniş bayraklar için 24 ** 32px geniş bayraklar için 32.
48px geniş bayraklar için 48.
64px genişlik için 64.
ReactJs için örnek proje:
function CountryList(){
const countries_code = ["au", "af", "bd", "br", "in"];
return (
<div className="country-list">
<ul>
{countries_code.map((country_code, index) => (
<li key={index}>
<img
src={`https://www.countryflags.io/${country_code}/flat/64.png`}
alt="..."
/>
</li>
))}
</ul>
</div>
);
}
);