hatscripts / circle-flags Goto Github PK

View Code? Open in Web Editor NEW

855.0 10.0 241.0 697 KB

A collection of 400+ minimal circular SVG country, state and language flags

Home Page: https://hatscripts.github.io/circle-flags

License: MIT License

CSS 3.57% HTML 68.84% JavaScript 27.59%

svg country-flags country icons circular round circle minimal design flags

circle-flags's People

Contributors

Stargazers

Watchers

Forkers

vicula maginative cmcky kiennt2 arttron lixiangnlp blendedmedia platanus krilo steniowagner georged19 colpaljw81 uqu8 silouone jvanrhyn livog nedimcimpo acmh chesterheng lumiqbionics adrianlara24 waldyrious letehaha orodrigogo dim0nickb shakurov git-ashish tnovau pwadomains pratibha05sharma09 sithuwin93 bjorkgard jussikinnula hansolavs dmitov jsherborne92 cjpdesign jaredklewis hostomani avimedical taraskendzor ramongilmoreno climech tlclassless roberto-gm wayi93 cesarlarsson visiyo willa gsrv-io sylvesteraswin cstrnt enrich nordentwickler ale-uy trilmn vooit seminmusic baramiji ftm-7 dskrux notesjor iskanderzghal phonghoang23 iuzn mahmudmoni ptalmeida munative johnsmithjsjs lflrocha neverether karthikediga pgroot91 gentlemansolo pavelsev ramyhhh mariusspring parkimeter cauaneandrade amkch ourparentcenter akagabi kguskov fionadawn dblh90 tian-zhihui kaierwen sloaix notrandom666 kareldohnal lucas-labs basharov duynvhe140930 regvenerat heyman legander tienit150198 nicbell wolnynick koukenyou

circle-flags's Issues

Issue with flags after last commit

Hi @HatScripts,

After the last commit on master, some flags are having issues.

Example: https://raw.githubusercontent.com/HatScripts/circle-flags/gh-pages/flags/es.svg

World Flag

Maybe someone has time to add a flag representing the whole planet. Something looking like a globe maybe.

Netherlands Antilles's missing

Netherlands Antilles's flag is missing

Add flag of Quebec

Include flag of the Canadian province of Quebec (ca-qc).

Depending on how much you want to simplify the fleur-de-lis, here is my version:

Proposal: use width/height instead of viewBox

I realize that viewBox="0 0 512 512" is shorter than width="512" height="512", but that's only a 3-character difference, and the latter has several advantages:

it's more explicit/intuitive, and doesn't include redundant parameters (the zero origin)
it matches the intended use of those attributes (viewBox makes more sense when we want to rescale the SVG contents to fit the document size, but they already do in our case)
it's compatible with svgo's default plugins
it allows GitHub to render rich diffs properly (currently GitHub assumes a zero-width, zero-height svg document e.g. in https://github.com/HatScripts/circle-flags/pull/2/files?short_path=46c1be0#diff-46c1be0e9a3d72b3efc0a451313ab64e)

I'd argue that the pros of width/height outweigh the cons, so I'd like to make the change to svgo.yml and to the svg files in the repo, but I wanted to make sure we're on the same page regarding this beforehand, hence this issue. Let me know what you think!

Color-bleeding issue

Commit: a419c7f
visibility:hidden shadows all other inlined SVGs (testcase below).
Tested with: Chrome + Firefox
Would it be possible to revert this patch?
Thank you so much!

<!DOCTYPE html>
<html >
<head></head>
<body>
<!-- hides the 2 flags below -->
<div style="visibility:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 256 249.6-41.3L512 256v256H0z"/><path fill="#a2001d" d="M0 0h512v256H0z"/></g></svg>
</div>
<!-- invisible -->
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 256 258.2-43.3L512 256v256H0z"/><path fill="#d80027" d="M0 0h512v256H0z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#d80027" d="m0 256 256.4-44.3L512 256v256H0z"/><path fill="#eee" d="M0 0h512v256H0z"/></g></svg>
</body>
</html>

Document flag design guidelines

From the conversation at #5:

The repo is mischievously titled circle-flags, ultimately allowing for expansion to include virtually any type of flag, so long as it follows the correct design scheme and has the right color palette.

Such design guidelines should be noted down in order to facilitate contributions to the project that expand the coverage of flags. Even a simple bullet list of high-level principles (with examples) would already be quite useful for this purpose.

Saudi Arabia flag is wrong

Saudi Arabia text seems to be wrong ? That's an issue that was filed on my lib that use this. I cannot verify this claim as I don't speak arabic

Update Afghanistan flag

The government of Afghanistan adopted a new flag in 2021. Here is a version I made based on Saudi Arabia's:

Styling with border radius not always works.

Hi,
First of all thanks for this awesome lib! Much appreciated.
I have installed this package as a dependency in my project.
I came across this weird issue where I've notice that the the styling of the border radius doesn't always work with border-radius:50%.
I first noticed when trying to rasterize the flags for a PDF export. The preview of the doc looked fine, but in the file itself the flag came out as as a square.
I navigated to the svg flag file in through my editor (WebStorm) and noticed the same thing, the flags are square there as well.
When opening the same file in the browser though, the border-radius:50% style prop was correctly interpreted and the flag showed up as round. And then it hit me! Not all programs are able to recognize/interpret the CSS like syntax. 🤔

Here is a preview of what I mean, file found at circle-flags/flags/gb.svg,
and notice border-radius:50% in the code side:

On the other hand, a svg image I found online, seems to by pass this issue in an another manner by adding some additional native svg elements which helps achieving a more universal compliance:

Here is a the code for the svg I found in the internet, maybe helps you see how they did it.
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> <g stroke="none" fill="none"> <g> <circle fill="#F0F0F0" cx="256" cy="256" r="256" /> <g transform="translate(8.000000, 8.000000)" fill="#0052B4"> <path d="M44.92,92.142 C24.811,118.305 9.648,148.46 0.819,181.219 L133.997,181.219 L44.92,92.142 Z" /> <path d="M495.181,181.219 C486.352,148.461 471.188,118.306 451.08,92.143 L362.005,181.219 L495.181,181.219 Z" /> <path d="M0.819,314.784 C9.649,347.542 24.812,377.697 44.92,403.859 L133.994,314.784 L0.819,314.784 Z" /> <path d="M403.858,44.921 C377.695,24.812 347.541,9.649 314.782,0.819 L314.782,133.996 L403.858,44.921 Z" /> <path d="M92.142,451.079 C118.305,471.188 148.46,486.351 181.218,495.181 L181.218,362.005 L92.142,451.079 Z" /> <path d="M181.217,0.819 C148.459,9.649 118.304,24.812 92.142,44.92 L181.217,133.995 L181.217,0.819 Z" /> <path d="M314.783,495.181 C347.541,486.351 377.696,471.188 403.858,451.08 L314.783,362.005 L314.783,495.181 Z" /> <path d="M362.005,314.784 L451.08,403.86 C471.188,377.698 486.352,347.542 495.181,314.784 L362.005,314.784 Z" /> </g> <g fill="#D80027"> <path d="M509.833,222.609 L289.393,222.609 L289.392,222.609 L289.392,2.167 C278.461,0.744 267.317,0 256,0 C244.681,0 233.539,0.744 222.609,2.167 L222.609,222.607 L222.609,222.608 L2.167,222.608 C0.744,233.539 0,244.683 0,256 C0,267.319 0.744,278.461 2.167,289.391 L222.607,289.391 L222.608,289.391 L222.608,509.833 C233.539,511.256 244.681,512 256,512 C267.317,512 278.461,511.257 289.391,509.833 L289.391,289.393 L289.391,289.392 L509.833,289.392 C511.256,278.461 512,267.319 512,256 C512,244.683 511.256,233.539 509.833,222.609 Z" /> <path d="M322.783,322.783 L437.019,437.02 C442.273,431.768 447.285,426.277 452.067,420.585 L354.265,322.783 L322.783,322.783 Z" /> <path d="M189.217,322.784 L189.215,322.784 L74.98,437.019 C80.232,442.273 85.723,447.285 91.415,452.067 L189.217,354.263 L189.217,322.784 Z" /> <path d="M189.217,189.219 L189.217,189.217 L74.981,74.98 C69.727,80.232 64.715,85.723 59.933,91.415 L157.736,189.218 L189.217,189.219 Z" /> <path d="M322.783,189.219 L437.02,74.981 C431.768,69.727 426.277,64.715 420.585,59.934 L322.783,157.737 L322.783,189.219 Z" /> </g> </g> </g> </svg>

Sorry I couldn't be of more help but I'm not an svg expert myself.

Request to improve the central circle of KR flag.

Good day, HatScripts.

I'm trying to use this amazing library, but I think some modifications are necessary for the Korean flag. Specifically, the red and blue colors of the central circle need to have curves according to the following conditions.

Would it be possible for you to make improvements in this regard?

Ref: https://www.mois.go.kr/frt/sub/a06/b08/nationalIcon_2_2/screen.do

Add Jolly Roger

A probably-fictional flag, but in popular use.

Update Martinique Flag

Martinique (mq) has a new flag:

In this case, please leave the current "Four Snakes" flag up, at least as a historical variant, both for the recency of the change (see #87), and for the fact that it's a much better design than the new one that it would be a shame to remove from the repo completely.

[feature] create additional spanish dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"es-US", "Spanish (United States)"

White circle around some flags

I recently integrated your icons into my app, but some of the flags have a white outline around them. Is it expected?

Consistent naming of subnational flags

Some subnational flags have two hyphenated two letter codes, like cn-xj (China, Xinjiang) and in-ka (India, Karnataka), while others which are prima facie very similar, have standalone codes, either abbreviated like hk (Hong Kong) or spelled out in full like mizoram (Mizoram), instead of cn-hk (China, Hong Kong) and in-mz (India, Mizoram).
EDIT: I have since learned that the relevant standard is ISO 3166-2.

Do I need to get the license to use the flags for my company app UI?

Do I need to get the license to use the flags for my company app UI? How can I guide my app developer to include the copyright in their coding?

North Ireland flag

hey North Ireland flag is missing, can u help me?

Also, can i use this flags to create a flag pack for Football Manager 2022? I will credit your project, obviously!

[feature] create italian dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"it-CH", "Italian (Switzerland)"

iso alpha 2

a couple of flags are not using their iso alpha 2, like ac, ta, bq. It's easier for automated tools when everything is iso 2.

[feature] create german dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"de-CH", "German (Switzerland)"

Coat of arms for the slovenian flag

The Slovenian flag currently has a stylised but incorrect coat of arms. If Spanish flag can be drawn in detail, so should Slovenian. You can find the official instructions for the Republic of Slovenia symbols here. Added is an example of quick fix:

... + the same in official colours.

[feature] create additional english dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"en-GH", "English (Ghana)"
"en-HK", "English (Hong Kong)"
"en-IE", "English (Ireland)"
"en-KE", "English (Kenya)"
"en-NG", "English (Nigeria)"
"en-PH", "English (Philippines)"
"en-SG", "English (Singapore)"
"en-TZ", "English (Tanzania)"

Use a circular clipPath to mask flags

Per waldyrious's suggestion on #8, here are some experiments with converting flags to use a circular <clipPath>. This helps to avoid having longer than necessary <path d="...">s, and generally makes the code more human readable. It also seems to result in smaller files when minified with svgo (For these examples I'm using svgo 1.3.2; the latest release at the time of writing).

We also trying to avoid the anti-aliasing/color-bleeding issues described here and on the graphic design SE.

Russia

Original (302 bytes minified):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <circle cx="256" cy="256" r="256" fill="#eee"/>
  <path fill="#0052b4" d="M496 345a255.4 255.4 0 0 0 0-178H16a255.5 255.5 0 0 0 0 178l240 22.3L496 345z"/>
  <path fill="#d80027" d="M256 512a256 256 0 0 0 240-167H16a256 256 0 0 0 240 167z"/>
</svg>

New (298 bytes minified):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <clipPath id="circle-mask">
      <circle r="256" cy="256" cx="256"/>
    </clipPath>
  </defs>
  <g clip-path="url(#circle-mask)">
    <rect y="0" x="0" height="160" width="512" fill="#eeeeee"/> <!-- white -->
    <rect y="160" x="0" height="192" width="512" fill="#0052b4"/> <!-- blue -->
    <rect y="352" x="0" height="160" width="512" fill="#d80027"/> <!-- red -->
  </g>
</svg>

United States

Original (836 bytes minified):

16px, 24px, 32px, 48px (zoomed to 400%)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <circle cx="256" cy="256" r="256" fill="#eee"/>
  <path fill="#d80027" d="M246 55v67h227.9A256 256 0 0 0 414 55H246zm0 134v67h266a256 256 0 0 0-9-67H246zM9 323a256 256 0 0 0 29.1 67h435.7a256 256 0 0 0 29-67H9zm89 134a256 256 0 0 0 158 55 256 256 0 0 0 158.5-55H97.9z"/>
  <path fill="#0052b4" d="M256 0a256 256 0 0 0-135 38.9h20l-21.6 15.7 8.2 25.4L106 64.3 84.4 80l6.3-19.4a256 256 0 0 0-48 54.3H48L38 122a256 256 0 0 0-9.2 16.1l5.8 17.8-10.5-7.7a256 256 0 0 0-9.3 22.7l6.5 19.9H48l-21.6 15.7 8.2 25.4L13 216.3 2.2 224A256 256 0 0 0 0 256h256V0z"/>
  <path fill="#eee" d="M84.4 156l56.6-41.1H71l56.6 41.1L106 89.4zm93 0l56.6-41.1h-70l56.6 41.1L199 89.4zm0-76L234 38.9h-70L220.6 80 199 13.4zm-93 152l56.6-41.1H71l56.6 41.1-21.6-66.6zm93 0l56.6-41.1h-70l56.6 41.1-21.6-66.6z"/>
</svg>

New (784 bytes minified):

16px, 24px, 32px, 48px (zoomed to 400%)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <clipPath id="circle-mask">
      <circle r="256" cy="256" cx="256"/>
    </clipPath>
    <path id="star" d="M-8.6 80L48 38.9h-70L34.6 80 13 13.4z" fill="#eeeeee"/>
  </defs>
  <g clip-path="url(#circle-mask)">
    <rect y="0" x="0" height="512" width="512" fill="#eeeeee"/> <!-- White background -->

    <g fill="#d80027"> <!-- Red stripes -->
      <rect y="64" x="0" height="64" width="512"/>
      <rect y="192" x="0" height="64" width="512"/>
      <rect y="320" x="0" height="64" width="512"/>
      <rect y="448" x="0" height="64" width="512"/>
    </g>

    <rect y="0" x="0" height="256" width="256" fill="#0052b4"/> <!-- Blue background -->

    <use href="#star" transform="translate(0 0)"/>
    <use href="#star" transform="translate(0 76)"/>
    <use href="#star" transform="translate(0 152)"/>
    <use href="#star" transform="translate(93 0)"/>
    <use href="#star" transform="translate(93 76)"/>
    <use href="#star" transform="translate(93 152)"/>
    <use href="#star" transform="translate(186 0)"/>
    <use href="#star" transform="translate(186 76)"/>
    <use href="#star" transform="translate(186 152)"/>
  </g>
</svg>

Update Oman flag

Current flag:

The correct flag:

Loading Image into Google sheet using =image()

I found that some flags do not load with the =image() formula in google sheets. The 2 I found is tr.svg and hk.svg do not load, but oddly enough cn-hk.svg does load

Not sure if this is due to something in the .svg file or not.

[feature] create french dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"fr-BE", "French (Belgium)"
"fr-CA", "French (Canada)"
"fr-CH", "French (Switzerland)"

Safari blurry icons

Hi,

Your library is awesome. It works perfectly on any device except for safari(iOS and desktop). The flags are blurry.

device screenshot

It happens when you load an image from url
<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">

I found solutions but looks tricky
<object type="image/svg+xml" data={path} />

It only affects icons from this library. That's why I guess it has some problems with svg structure.

Thanks again for your work!

SVG border-radius issue

Hey I noticed the flags have been updated to use <style> now for border-radius. Specifically the value 50% is leading to errors if user is using for example react-native-svg library's component for rendering the svg, since it is trying to pass the borderRadius as a string instead of a number.

Not really sure if this is something that could or should be fixed here or in the react-native-svg lib, but something to be aware of.

Add Antarctica "True South" flag

The True South flag is a popular flag representing Antarctica which I think would be a good inclusion.
Perhaps something like this:

Flag for punjabi language

Not an issue - just an idea (since circle-flags supports many Indian languages).
Maybe a flag for punjabi language (pa).
Flag of of Punjab state:
https://www.deviantart.com/ramones1986/art/Punjabi-Tricolor-567835840

Maybe: Telugu language (Andhra Pradesh)

Symlink doesnt seem to install with npm install

Run:

npm install --save https://github.com/HatScripts/circle-flags

The symlink flags eg: "uk" dont seem to download,

Tested on OSX - Not sure if the symlinks are platform specific - but i think they are.

It may make sense to simply duplicate flags rather than symlink them for easier cross-platform intergration

Add Hong Kong flag

I propose adding the flag of Hong Kong. Something like:

"clipPath" in es.svg

Thanks you so much for fixing #39!
Would it be difficult to remove the last remaining global "id" from es.svg?
Thanks for your merits!

Klingon flag

Hello! Could you add Klingon flag? I am working on a translator application that has this language and it would be nice to present it with a flag :)

hatscripts.github.io down :-(

The greek flag is wrong

Hello,

Thank you for the amazing work you've done so far.
I'd like to point out that the greek flag is wrong.
Please have a look here: https://cdn.countryflags.com/thumbs/greece/flag-round-250.png

Notice that the cross should extend to the bottom line.

Thank you in advance.

Flag svgs are broken

Hi,

First of all thanks for a great flag library 🙏

It seems that the latest commit 'Optimize files with svgo 2.3.0' has broken lots of the svgs. I can see the flags are also missing on your flag gallery website.

You might already be working on a fix for this, but I just wanted to let you know since lots of the flags on my website depend on this great library. 😊

[feature] create dutch dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"nl-BE", "Dutch (Belgium)"

Historical flags

Are you open to including historical flags, such as the USSR or the Betsy Ross flag?

issue with SVGO

Hi, i followed the readme sintraction, however when i run svgo ./flags --recursive --config=svgo.config.js i get this error:
Error: Unknown builtin plugin "cleanupIDs" specified.

I'm using node v19.1.0 and SVGO 3.0.2

More explicit svgo version

Moving a discussion started in c9eed38 into an actual issue, to make it more trackable :) Repeating what I said there:

@HatScripts I think it's better to mention a specific version or version range that's been tested to work, in case they introduce breaking changes that invalidate this statement. E.g. #93.

_{@HatScripts, would you mind copying your response below, so it gets properly attributed to you? Then we can continue the discussion here.}

Please Update New Flag Bahamas Country

Bahamas Country Flag is wrong pls update new flag

Rollback to the internationally-recognized flag of Afghanistan

I did not see any discussion with the commits regarding this flag change.

According to the Flag of Afghanistan Wikipedia page, the internationally-recognised flag of Afghanistan is still the one from the Islamic Republic of Afghanistan (tricolor flag), and not the Islamic Emirate of Afghanistan (white flag, Taliban flag).

For example: the UN still use the tricolor flag, and a search for "afghan embassy" on Twitter only shows the tricolor flags, in various countries.

My suggestion would be to rollback 0a9caaf (#77, #82)

Adjusting a flag without recognition from the international community might be a bit sensitive and/or a political statement. Adding the flags of disputed lands is opening the discussion, but by changing this flag, you are removing a flag still recognised by almost the whole world the world to show one only recognised by a few.

If there is another source (consistently) used by this repo that do recognise the white version of the flag, please let me know and I would be happy to use an historical version of this repository.

Change `languages/la.svg`

Latin is associated with ancient Rome, commonly referred to as SPQR (Senatus Populusque Romanus), which was its government.

The flag of the SPQR resembles:

(image from Wikipedia)
Also:

(image from Wikimedia Commons)

A website named "Duolingo" uses the following flag:

(from this CDN link)

Overall, the flag can be described as two golden wheat spikes encircling the golden letters "SPQR" in a serif font on a red background.

I have no idea where the current flag (red background with the character æ) comes from. This character is not unique to Latin and is used today in many nordic languages (Norwegian, Danish, Icelandic, etc.)

missing flags

it appears those 3 are missing AC, BQ, TA

Flags of DPR and LPR

Include flags of the disputed Donetsk and Luhansk People's Republics.

Flag of French Guiana is missing

GF.svg flag is missing in the source.

In the file all-flags.md:

French Guiana (GF) is incorrect - you have mapped it to the Flag of Georgia

[feature] create arabic dialect flags

Similar to this commit following dialects can be useful. Used from services as Microsoft Azure for example :

"ar-IL", "Arabic (Israel)"

These flags are missing

Hey! I use this library with the CountryType field of Symfony.

Unfortunately, it seems that some flags are missing. Here is the list :

sh : Saint Helena
mf : Saint-Martin
pm : Saint Pierre and Miquelon
wf : Wallis and futuna
tf : Southern French lands
sj: Svalbard and Jan Mayen
bq : Caribbean Netherlands
nc : New Caledonia
yt : Mayotte
re : La Réunion
um : United States Minor Outlying Islands
hm : Heard and MacDonald Islands
bv : Bouvet Island
gp : Guadeloupe
gs : South Georgia and the South Sandwich Islands
aq : Antarctic

hatscripts / circle-flags Goto Github PK

circle-flags's People

Contributors

Stargazers

Watchers

Forkers

circle-flags's Issues

Russia

United States

Recommend Projects

Recommend Topics

Recommend Org