Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhance: use flag-icons for country flags #3848

Merged
merged 29 commits into from
Aug 6, 2024
Merged

enhance: use flag-icons for country flags #3848

merged 29 commits into from
Aug 6, 2024

Conversation

marcelgerber
Copy link
Member

@marcelgerber marcelgerber commented Aug 5, 2024 •
edited
Loading

Updating our flags with 4x3 variants taken from https://flagicons.lipis.dev/.
They are mostly pretty nice-looking and up-to-date, although there are a few exceptions.

Pulling these files into our own repo like this allows us to easily replace a flag on our own if we ever need to do so (although we should try our best to create a 4x3 variant ourselves).

@owidbot
Copy link
Contributor

owidbot commented Aug 5, 2024

Quick links (staging server):

Site Admin Wizard

Login: ssh owid@staging-site-flags

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-08-05 17:49:31 UTC
Execution time: 1.20 seconds

@ikesau ikesau mentioned this pull request Aug 5, 2024
Closed
@marcelgerber marcelgerber requested a review from ikesau August 5, 2024 18:09
@marcelgerber marcelgerber marked this pull request as ready for review August 5, 2024 18:09
ikesau
ikesau reviewed Aug 5, 2024
View reviewed changes
Copy link
Member

@ikesau ikesau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I definitely want to get these in 🙂

I wonder though, should we ensure that every country in regions.json has an associated flag? That would be a nice promise to keep for the sake of the site.

I went through and marked all the flags that seemed egregiously different from wikipedia. I feel like we should update them here (mostly with correct colours) and then submit a PR upstream. Happy to help with this if you agree 🙂

public/images/flags/BLM.svg
</g>
<use xlink:href="#t3" x="-49.151" y="-55.104"/>
<use xlink:href="#t3" x="49.151" y="-55.104"/>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bl" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come this one's been changed to 🇫🇷 but Guadeloupe's been deleted?

public/images/flags/KGZ.svg Outdated
</g>
<use xlink:href="#x" transform="scale(-1,1)"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-kg" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another one to try and update upstream

public/images/flags/KIR.svg Outdated
<path id="w" fill="#fff" d="M0,257.14c20,0,40,12.86,60,12.86s40-12.86,60-12.86,40,12.86,60,12.86,40-12.86,60-12.86,40,12.86,60,12.86,40-12.86,60-12.86,40,12.86,60,12.86,40-12.86,60-12.86,40,12.86,60,12.86,40-12.86,60-12.86v-21.43c-20,0-40,12.86-60,12.86s-40-12.86-60-12.86-40,12.86-60,12.86-40-12.86-60-12.86-40,12.86-60,12.86-40-12.86-60-12.86-40,12.86-60,12.86-40-12.86-60-12.86-40,12.86-60,12.86-40-12.86-60-12.86v21.43z"/>
<use xlink:href="#w" y="-42.8571"/>
<use xlink:href="#w" y="-85.7142"/>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ki" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥴

public/images/flags/KWT.svg Outdated
<rect width="12" height="2" y="2" fill="#fff"/>
<rect width="12" height="2" y="4" fill="#ce1126"/>
<polygon points="0,0 3,2 3,4 0,6"/>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-kw" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another weird colour

public/images/flags/ERI.svg Outdated
<path d="M 0,500 H 1000 V 250" fill="#4189dd"/>
<path d="M 0,0 H 1000 V 250" fill="#12ad2b"/>
<path d="m 230.24958,369.16163 c -10.81019,2.98487 -17.00779,11.37176 -16.84908,19.28459 l 53.21067,-.21363 c .47814,-8.50288 -6.51706,-16.36688 -17.16651,-19.46365 52.09769,-1.07633 97.35688,-20.59084 105.581,-33.1122 -8.13867,-3.53218 -17.549,2.15268 -24.25731,.84438 15.92738,-7.36142 63.64648,-38.2477 55.88829,-71.3599 -6.03077,18.39137 -24.30006,33.60865 -32.08062,37.69427 17.82572,-27.0672 42.16648,-55.24736 21.04864,-77.06919 1.06617,12.64749 -8.03695,26.56668 -12.05744,27.61248 10.34017,-28.59929 20.20628,-64.50713 -2.19744,-88.17848 2.94212,8.55578 1.75387,32.69103 -2.29716,33.77551 -1.24724,-19.44736 -4.56579,-60.35236 -25.04676,-59.77044 6.50483,5.79067 9.35132,21.59597 9.49579,37.55999 -4.66752,-10.93635 -9.97191,-19.17065 -21.31722,-27.24625 -9.1784,-17.60192 -25.50865,-32.18643 -41.84094,-42.63446 1.83323,12.81231 3.3511,22.92055 21.2399,36.20897 -9.32691,-.57988 -18.65181,-18.26115 -28.61965,-18.75151 -7.9291,-.38252 -14.15112,7.18442 -27.10788,2.83023 1.43443,4.27687 7.47944,6.17115 8.75516,9.33506 -2.77528,1.91666 -9.36353,-.2991 -14.84086,-3.1517 7.53437,10.26287 19.2093,16.29769 29.12018,14.26099 11.78683,-2.26662 24.42417,-1.0682 36.47755,5.79067 -3.07847,1.58094 -15.06063,1.57076 -22.74963,.60837 6.98908,7.07657 11.67696,11.76649 23.83003,11.68917 10.85496,-.0712 16.54593,-5.79067 19.33342,-2.24831 6.80802,8.06746 11.39008,16.13085 17.08512,25.62869 -12.58035,1.38968 -8.78773,-14.22843 -22.79846,-22.21654 -7.87213,16.29363 9.05427,35.60873 20.57661,43.63753 .15464,12.24667 1.94515,22.49328 7.13964,31.81816 3.50167,6.57402 8.02882,13.30267 6.32173,28.13947 -6.89753,-5.0236 -13.63838,-21.96628 -11.15813,-35.41544 -8.6331,2.35412 -12.00862,17.53477 -7.93928,25.177 3.0398,5.81712 5.06836,16.95083 1.56263,21.92763 -3.41621,4.63701 -3.77431,4.11816 -3.72955,14.06973 .12208,5.95547 -3.2046,12.99747 -8.62293,17.90712 1.13128,-4.19549 2.42126,-11.4145 1.1679,-15.9274 -4.28297,7.26581 -15.02806,14.78391 -18.41171,22.59501 -3.32262,7.82941 -4.16498,21.39048 -20.24496,24.51776 -20.68648,4.10597 -27.82614,7.69106 -41.13694,13.13786 -1.47717,-10.11027 2.94416,-31.19351 11.39822,-29.99103 8.25464,1.46904 33.28107,-8.62292 24.32853,-29.70616 -1.76813,6.64524 -7.66663,13.12972 -14.04328,13.41661 6.88939,-8.9383 19.18489,-18.19401 13.19686,-33.17121 -3.32872,6.36648 -8.56392,14.00667 -16.5032,18.30592 8.51101,-16.30991 .98885,-21.18904 -9.11736,-7.75616 -3.81704,5.1823 -6.12232,15.56724 -8.54765,28.75598 -3.96963,-10.72678 -3.70716,-24.84738 -8.41131,-36.31274 -4.91373,-12.39928 6.52111,-15.67305 11.90282,-14.67811 13.17651,3.51795 35.19773,3.51591 33.56185,-18.25301 -5.69096,7.36346 -15.67102,9.63823 -26.44865,6.98704 12.10424,-8.83859 21.66109,-25.46387 8.17326,-34.14377 -.44966,9.20485 -7.57304,19.52469 -17.08309,24.27768 -2.22592,-7.76634 -2.22592,-16.00879 -.3174,-25.04475 -5.31048,5.58923 -9.18856,17.2194 -12.27312,30.44068 -.23196,-13.06868 2.24017,-22.48513 4.0734,-29.51491 2.77936,-10.26897 9.68706,-3.58712 20.26124,-2.83022 10.18352,.57784 24.20443,-5.05005 21.52476,-18.85935 -3.47724,5.46309 -10.61486,7.58932 -17.90712,7.01148 8.7796,-5.31863 24.07624,-14.76967 15.6873,-29.30738 -3.52405,5.50581 -4.6655,10.21606 -14.8653,11.90485 2.67152,-6.14471 3.11509,-14.83274 11.03199,-18.27539 -14.12264,-2.81192 -22.20842,6.456 -26.31845,20.97132 -1.6664,-10.06347 -3.65019,-13.7686 -4.04493,-21.13003 7.63408,-8.47848 8.43371,-25.06509 -8.0939,-28.7743 -.98072,8.55579 -.68976,10.59453 1.19027,17.56123 -7.75819,-4.60852 -18.6925,-7.15186 -25.97254,-.63481 4.93203,5.3227 12.56611,10.00854 24.3326,4.20363 -2.77936,9.09292 -10.00854,7.53641 -19.94179,4.06932 6.07146,11.40432 13.73402,13.43087 22.1901,12.11647 4.42744,11.67289 4.62277,20.54201 -8.3157,37.54168 .59819,-10.564 -.15259,-18.43411 -8.5456,-26.97565 -7.19256,-7.04402 -13.03816,.30114 -1.79865,15.96198 -6.81818,-5.02156 -14.53567,-15.21321 -16.85927,-25.40284 -2.2483,12.58849 -.22381,27.42531 6.74493,35.74304 -3.29616,3.522 -7.04403,-.37439 -12.5885,-8.99122 2.09775,27.57587 13.8622,32.89653 29.67362,26.74981 .44966,15.13589 .44966,29.1507 1.34898,47.43424 -9.21908,-13.26199 -20.90623,-23.15455 -27.42733,-25.62667 -2.02247,7.41841 5.62179,17.08308 9.89256,22.47902 -6.51909,-1.34898 -20.68242,-12.13883 -20.68242,-12.13883 -1.42427,12.28941 14.46447,23.67949 24.72938,28.77429 -12.06357,-.52495 -17.38626,-5.0948 -25.17904,-12.5885 .15057,34.09496 36.94145,28.17406 43.83694,22.92869 .89933,16.78601 2.18117,36.19065 3.0805,52.97669 -10.40123,-1.81493 -9.5833,-4.94223 -18.48295,-5.76626 -24.70088,-.9624 -44.29473,-29.65123 -50.78329,-50.75482 -1.86173,3.47317 -.38456,7.10709 -2.08757,11.3738 -4.01034,-10.3585 -9.13363,-23.73645 -16.00471,-29.96253 1.74981,6.03889 1.93497,12.17545 1.3266,23.46176 -2.35818,-7.31259 -4.55155,-9.5548 -4.71026,-18.13907 .15057,-6.59029 6.35834,-11.45316 6.01449,-20.72311 -.25434,-6.76731 -6.42752,-21.43525 -7.33499,-32.79073 -2.98893,11.68715 -4.86489,24.00707 -9.44289,31.24235 2.27476,-12.48066 1.54553,-21.09341 5.3939,-29.49253 4.44575,-8.84267 8.22617,-16.73718 5.26573,-25.66125 -2.83837,3.44674 -1.86173,6.57808 -8.99304,14.95279 -1.54899,-9.10719 9.22092,-23.68356 19.67301,-29.5434 7.37162,-3.88419 16.66394,-17.77691 10.6108,-27.29915 -6.93211,4.97883 -10.04516,11.70544 -19.83802,23.1993 6.98502,-27.30527 25.13426,-34.44899 46.8625,-34.54258 4.80792,-.0224 14.50109,-1.75796 17.22144,-8.12037 -6.12435,2.36429 -13.36574,2.66542 -19.80954,1.37544 4.68991,-6.88532 14.5662,-5.99007 23.769,-6.03076 7.219,-.0346 18.48904,-1.01327 23.04467,-11.29445 -8.80605,3.815 -22.54007,4.60853 -31.18741,1.90648 13.75232,-7.12541 35.29336,-7.89248 46.34162,-17.24382 -12.59256,-9.39813 -44.10349,2.18931 -64.00661,15.8399 5.56278,-5.08667 14.35457,-14.11043 19.20523,-21.39454 -10.88547,-5.21893 -38.41454,25.27873 -47.89814,43.39949 -9.00748,5.08666 -12.61088,13.06054 -16.10848,18.62537 4.79979,-16.21836 5.30845,-27.98688 9.31268,-41.34245 -30.87691,10.62911 -18.04263,67.6792 -24.75887,81.32776 .79047,-15.06877 .15036,-34.42661 -6.05355,-44.40869 -9.51045,7.25563 -10.27792,49.95927 -1.34898,85.51104 -3.22434,-9.51411 -9.31004,-18.39545 -11.2625,-29.97475 -14.075438,25.67142 8.25119,55.95747 26.9207,79.8811 -14.05509,-7.32073 -27.95188,-23.06704 -37.08022,-36.26796 2.51954,45.94689 50.5009,55.49356 57.94982,66.78596 -10.11027,-4.70617 -29.43881,-14.01886 -37.64056,-4.26059 13.3519,3.08253 24.00218,6.64523 32.58441,12.27109 12.45217,15.54691 36.03195,22.34677 77.09767,24.06403 z" fill="#ffc726"/>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-er" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flagging (ha) all the weird colours I spot so we can maybe do a batch update in an upstream PR

public/images/flags/NAM.svg Outdated
<use xlink:href="#r4" transform="rotate(60)"/>
<circle r="5.5" stroke="#003580"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-na" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colours

public/images/flags/SVN.svg Outdated
<path d="m-111.58-167.05l9.96 146.99a146.95 146.95 0 0 0 101.62 129.95 146.95 146.95 0 0 0 101.62 -129.95l9.96-146.99a280.22 280.22 0 0 0 8.42 3.82l-9.74 143.75a155.61 155.61 0 0 1 -110.26 138.45 155.61 155.61 0 0 1 -110.26 -138.45l-9.74-143.75a280.22 280.22 0 0 0 8.42 -3.82" fill="#ed1c24"/>
</svg>
</g>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-si" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colours

public/images/flags/TGO.svg Outdated
<use xlink:href="#c" transform="rotate(216)"/>
<use xlink:href="#c" transform="rotate(288)"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-tg" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colours

public/images/flags/UKR.svg
<rect width="1200" height="400" y="400" fill="#FFD500"/>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ua" viewBox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="gold" d="M0 0h640v480H0z"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colours

public/images/flags/VCT.svg Outdated
<path d="m27,24 4,8 4,-8 -4,-8z"/>
<path d="m37,24 4,8 4,-8 -4,-8z"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-vc" viewBox="0 0 640 480">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colours

@marcelgerber
Copy link
Member Author

I wonder though, should we ensure that every country in regions.json has an associated flag? That would be a nice promise to keep for the sake of the site.

Ah yes, good point. I didn't realise that we excluded unlisted countries - now they're included, and we have flags for all of them.

marcelgerber
marcelgerber commented Aug 6, 2024
View reviewed changes
public/images/flags/BFA.svg Outdated
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The star seems a bit overly large here?

marcelgerber
marcelgerber commented Aug 6, 2024
View reviewed changes
public/images/flags/BHS.svg Outdated
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors are off

marcelgerber
marcelgerber commented Aug 6, 2024
View reviewed changes
public/images/flags/BWA.svg Outdated
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors seem to be off

marcelgerber
marcelgerber commented Aug 6, 2024
View reviewed changes
public/images/flags/CAF.svg Outdated
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors

marcelgerber
marcelgerber commented Aug 6, 2024
View reviewed changes
public/images/flags/DMA.svg Outdated
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an old flag design, it seems - The yellow star outlines are no longer used.

ikesau
ikesau approved these changes Aug 6, 2024
View reviewed changes
Copy link
Member

@ikesau ikesau left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I've manually overwritten 18 of these, we won't be able to run the script again without a small headache, or getting the changes merged upstream. I think that's okay though. We probably wouldn't have been running it often, anyway.

@marcelgerber marcelgerber merged commit c24a48d into master Aug 6, 2024
12 of 14 checks passed
@marcelgerber marcelgerber deleted the flags branch August 6, 2024 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ikesau ikesau ikesau approved these changes

Assignees

@marcelgerber marcelgerber

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@marcelgerber @owidbot @ikesau