How to use flags in Windows

Have you attempted to utilize a national flag such as 🇺🇸 on Windows? If not, I recommend that you give it a try, as the result would probably be disappointing.

However, individuals who have previously attempted to do so would inform you that Windows does not support national flags, and there is no suitable solution available. Based on my research, here's what I discovered.👇🏾

It's disappointing, isn't it?

Nonetheless, it's evident that other operating systems such as Linux and iOS are implementing something that Windows isn't familiar with since they do not experience this problem.

It's understandable to feel concerned, but as a developer, I have discovered a simple workaround to this issue and would like to share it with others. I will also be demonstrating it, and you are free to utilize it any way you see fit. Given that national flags are not supported, I utilize this API.

https://restcountries.com/v2/name/${countryName}

It is gotten from this project called Rest Countries, an open-source project that not only addresses the flag problem but also offers much more than just flags. They have gone above and beyond by providing additional features.

The tool is user-friendly and includes various features beyond the flag. It provides population, capital, region, latitude, longitude, and so much more. However, for now, we are focusing on flags alone.

Pass the country name as a parameter, and the API will send the flag URL. I have included a demonstration in the image below.👇🏾 Please open your browser, copy the link from the blog, and paste it into the address bar. I will be using "Nigeria" as my country name, but you are free to choose any country you prefer or follow my lead.

Hit enter and boom!! we get a response similar to this 👇🏾

Oh no! This isn't what you're looking forward to I know. However, remember that I mentioned the API provides additional properties besides the flag. Please take a look at the response and search for the flag property. It should be included in the first object of the array that is returned as a response.

Yes, it is a URL that returns an SVG, copy it, open another tab and paste it into your browser. I got an amazing country flag See below.

with this, you can embed this link anywhere you want and it will always return the country flag. Also, there are other formats too, in case of performance issues, go back to the initial response and check the flags property.

There are two formats available in this case, PNG and SVG. You will need to repeat the same process to obtain the links for both formats. However, if you are a developer like myself and seeking a way to implement this in your code, I have included a TypeScript snippet that demonstrates how to utilize the API.

async function getCountryFlag(countryName: string):string {
  // Fetch the country data from the API
  const response = await fetch(
    `https://restcountries.com/v2/name/${countryName}`
  );
   // convert the response to json
  const countryData = await response.json();
   // access the flag property from the response
  const flagUrl = await countryData[0].flag;
   // return the flag
  return flagUrl;
}

Don't worry, I'll explain. The function above accepts an argument called "country name" (e.g., Nigeria), sends a request to the API, and receives a response. The response is an array that contains a "flag" property, whose value is a URL that returns an SVG-format image of the specified country.😃

In conclusion, you can embed this image URL anywhere you’d like the image to be displayed(eg on the web it can be added to img element via the src property.)

Thanks for reading, buy me a coffee and follow me on Github 😎

Resources

REST Countries