Consistent 4:3 ratio flag images
jackocnr opened this issue · comments
We're currently using the flag images from the region-flags library, which has highly accurate flags, but because of this, the aspect ratios are (necessarily) inconsistent. Some flags are 15px tall e.g. Vatican City, and some are only 8px tall e.g. Qatar. And while most flags are 20px wide e.g. United Kingdom, some are only 13px wide e.g. Nepal. So if we select those 4 countries as our onlyCountries option, we end up with a situation like this (notice how much the flags vary in terms of width/height):
Whereas if we switch to the flag-icons library, which uses a consistent 4:3 ratio (as suggested by @bronisMateusz), we end up with this instead (notice how all flags have consistent width/height):
While not technically accurate in terms of respecting countries' flag aspect ratios, this provides a much more consistent UI experience.
IMPORTANT: This change will require updating/replacing the existing image build system, which will become much simpler! Note: we currently use the legacy tool Grunt for this (see the root Gruntfile.js, which triggers tasks from the root /grunt/ directory), and it would be fine to keep using that system, or it would also be fine to switch to npm scripts, which I believe would be the more modern approach.
I don't have time to implement this myself right now, but I would welcome a pull request.
Released in v24.0.0