Code Monkey home page Code Monkey logo

flag-icons's Introduction

flag-icons

A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo.

Install

You can either download the whole project as is or install it via npm or Yarn:

npm install flag-icons
# or
yarn add flag-icons

Usage

First, you need to import css:

import "/node_modules/flag-icons/css/flag-icons.min.css";

or use CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"
/>

For using the flags inline with text add the classes .fi and .fi-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class fis as well. Example:

<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>

You could also apply this to any element, but in that case you'll have to use the fib instead of fi and you're set. This will add the correct background with the following CSS properties:

background-size: contain;
background-position: 50%;
background-repeat: no-repeat;

Which means that the flag is just going to appear in the middle of an element, so you will have to set manually the correct size of 4 by 3 ratio or if it's squared add also the flag-icon-squared class.

Development

Run the yarn to install the dependencies after cloning the project and you'll be able to:

To build *.scss files

$ yarn build

To serve it on localhost:8000

$ yarn start

To have only specific countries in the css file, remove the ones that you don't need from the _flag-icons-list.scss file and build it again.

Credits

  • This project wouldn't exist without the awesome and now deleted collection of SVG flags by koppi.
  • Thank you Andrejs Abrickis for providing the flag-icons name on npm.

flag-icons's People

Contributors

2009 avatar bcaller avatar bequadrat avatar colinj avatar danny-engelman avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar designer023 avatar greenkeeper[bot] avatar greenkeeperio-bot avatar gucr avatar jorgemoya avatar lipis avatar markesaaremets avatar markvantilburg avatar mdxs avatar nhalink avatar nogic1008 avatar nottsunami avatar oleksmarkh avatar oller avatar paddy2k avatar peterisj avatar robinvandervliet avatar sashko avatar snowyu avatar sqwk avatar starkrobin avatar xavier2k6 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flag-icons's Issues

Optimize SVGs using SVGO

I would recommend optimizing SVGs using SVGO.

I've done this for all 4x3 SVGs and saved quite a lot of bits:

Average size saved per file: 50.61%
Total size saved: 33.29%

Total file sizes before:
Before: 4690.31 KiB
After: 3128.94 KiB

Average file size:
Before: 18.84 KiB
After: 12.57 KiB

(Strangely I should mention that aw.svg and ms.svg got bigger!)

This could me included in the build process using grunt-svgmin, which internally uses SVGO.

Flag wrapper

Hello,

There is an issue with the flag wrapper, the .flag-icon class, if you want to add a border it is bigger than the flag itself, add a border is useful when you work with white background, they are many flag that have white parts or per example, Japan flag.

At the moment i solved it overridden .flag-icon with it:

// border on the flags
.flag-icon {
    border: 1px solid @gray-light;
    background-color: @gray-light;
    line-height: 0.9em;
    text-align: center;
}

it works on all the browsers but it is not a final solution, because like the unit it em, on medium screen the with doesn't match totally.

Make it work on Wordpress

Hello! This is not an issue, just a question.

How I can make it work on Wordpress? I'm kinda new to all this, and I got lost really quickly when searching about .json packages.

I want to install this in my Wordpress to make it work on a plug-in (it's about hove on a image and making a flag appear, really simple). I don't know if it's possible.

Can you help me? Thank you so much!

Wrong colors for at least one flag (Sweden)

Please compare these images:
2015-02-24_9-44-23
2015-02-24_9-44-32
The first one is from your project and the second one from Wikipedia.

Most if not all flags have strictly defined colors and at least some of the images used in your project seem to be wrong. According to Wikipedia, the flag of Sweden has #006AA7 for blue and #FECC00 for yellow. When compared to https://github.com/lipis/flag-icon-css/blob/master/flags/1x1/se.svg with #003F73 and #FFCC00 respectively, the difference is very noticeable.

I haven't checked but other flag images might have the same problem.

Additional Language Codes (ISO-639-1)

Flags are often used as symbol for languages. What do you think about implementing ISO-639-1 for language flags?

For example:
flag-icon-lang-de would be the same as flag-icon-de, but flag-icon-lang-en would be the same as flag-icon-gb

Merge /css and /assets

For the shake of minimalism I believe that the directories /css and /assets can be merged into one, after all the only source code is under /less

Docs : Instructions ?

Usage and Developement are understood, but it would be nice to have instructions on how to reference the assets :

<link href="...
<script...

Add viewBox="0 0 640 480" in SVG

Hello,

I have some problem when resizing the flag. It is ok with Chrome, but their is some problems with Firefox 37 or IE 11. By example:
http://asauvez.free.fr/OW/toto.html

It seem it may be corrected if the tag of the flags has an attribute viewBox="0 0 640 480" (for 4x3. For 1x1, viewBox="0 0 512 512"):

<svg viewBox="0 0 640 480" id="svg548" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1" y="0" x="0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Thank for your time and continue the good work.

Adrien

Missing information in bower.json

Can you please add in your bower.json :
"main": [
"./css/flag-icon.min.css"
],

so that the injection in index.html will work

Ca you also change the version in bower.json to the latest one, to avoid bower shouting.

Thanks for this package

unabbreviated country list

I'm looking for a list of all the abbreviation with there unabbreviated country name beside it. Does a list like this exist.

ACF Support: Country code with Country name for Select Field

I recently used this project within Advanced Custom Fields, allowing a client to choose a flag from a <select> box, which displays on the front end. I Pulled all the countries into the format that is needed for flag-icon-css to work.

The only thing that is needed is the country code to be lowercase, but easier to do when working within a project.

Country codes and their respective countries.

AF : Afghanistan
AX : Åland Islands
AL : Albania
DZ : Algeria
AS : American Samoa
AD : Andorra
AO : Angola
AI : Anguilla
AQ : Antarctica
AG : Antigua and Barbuda
AR : Argentina
AM : Armenia
AW : Aruba
AU : Australia
AT : Austria
AZ : Azerbaijan
BS : Bahamas (the)
BH : Bahrain
BD : Bangladesh
BB : Barbados
BY : Belarus
BE : Belgium
BZ : Belize
BJ : Benin
BM : Bermuda
BT : Bhutan
BO : Bolivia (Plurinational State of)
BQ : Bonaire, Sint Eustatius and Saba
BA : Bosnia and Herzegovina
BW : Botswana
BV : Bouvet Island
BR : Brazil
IO : British Indian Ocean Territory (the)
BN : Brunei Darussalam
BG : Bulgaria
BF : Burkina Faso
BI : Burundi
CV : Cabo Verde
KH : Cambodia
CM : Cameroon
CA : Canada
KY : Cayman Islands (the)
CF : Central African Republic (the)
TD : Chad
CL : Chile
CN : China
CX : Christmas Island
CC : Cocos (Keeling) Islands (the)
CO : Colombia
KM : Comoros (the)
CD : Congo (the Democratic Republic of the)
CG : Congo (the)
CK : Cook Islands (the)
CR : Costa Rica
CI : Côte d'Ivoire
HR : Croatia
CU : Cuba
CW : Curaçao
CY : Cyprus
CZ : Czech Republic (the)
DK : Denmark
DJ : Djibouti
DM : Dominica
DO : Dominican Republic (the)
EC : Ecuador
EG : Egypt
SV : El Salvador
GQ : Equatorial Guinea
ER : Eritrea
EE : Estonia
ET : Ethiopia
FK : Falkland Islands (the) [Malvinas]
FO : Faroe Islands (the)
FJ : Fiji
FI : Finland
FR : France
GF : French Guiana
PF : French Polynesia
TF : French Southern Territories (the)
GA : Gabon
GM : Gambia (the)
GE : Georgia
DE : Germany
GH : Ghana
GI : Gibraltar
GR : Greece
GL : Greenland
GD : Grenada
GP : Guadeloupe
GU : Guam
GT : Guatemala
GG : Guernsey
GN : Guinea
GW : Guinea-Bissau
GY : Guyana
HT : Haiti
HM : Heard Island and McDonald Islands
VA : Holy See (the)
HN : Honduras
HK : Hong Kong
HU : Hungary
IS : Iceland
IN : India
ID : Indonesia
IR : Iran (Islamic Republic of)
IQ : Iraq
IE : Ireland
IM : Isle of Man
IL : Israel
IT : Italy
JM : Jamaica
JP : Japan
JE : Jersey
JO : Jordan
KZ : Kazakhstan
KE : Kenya
KI : Kiribati
KP : Korea (the Democratic People's Republic of)
KR : Korea (the Republic of)
KW : Kuwait
KG : Kyrgyzstan
LA : Lao People's Democratic Republic (the)
LV : Latvia
LB : Lebanon
LS : Lesotho
LR : Liberia
LY : Libya
LI : Liechtenstein
LT : Lithuania
LU : Luxembourg
MO : Macao
MK : Macedonia (the former Yugoslav Republic of)
MG : Madagascar
MW : Malawi
MY : Malaysia
MV : Maldives
ML : Mali
MT : Malta
MH : Marshall Islands (the)
MQ : Martinique
MR : Mauritania
MU : Mauritius
YT : Mayotte
MX : Mexico
FM : Micronesia (Federated States of)
MD : Moldova (the Republic of)
MC : Monaco
MN : Mongolia
ME : Montenegro
MS : Montserrat
MA : Morocco
MZ : Mozambique
MM : Myanmar
NA : Namibia
NR : Nauru
NP : Nepal
NL : Netherlands (the)
NC : New Caledonia
NZ : New Zealand
NI : Nicaragua
NE : Niger (the)
NG : Nigeria
NU : Niue
NF : Norfolk Island
MP : Northern Mariana Islands (the)
NO : Norway
OM : Oman
PK : Pakistan
PW : Palau
PS : Palestine, State of
PA : Panama
PG : Papua New Guinea
PY : Paraguay
PE : Peru
PH : Philippines (the)
PN : Pitcairn
PL : Poland
PT : Portugal
PR : Puerto Rico
QA : Qatar
RE : Réunion
RO : Romania
RU : Russian Federation (the)
RW : Rwanda
BL : Saint Barthélemy
SH : Saint Helena, Ascension and Tristan da Cunha
KN : Saint Kitts and Nevis
LC : Saint Lucia
MF : Saint Martin (French part)
PM : Saint Pierre and Miquelon
VC : Saint Vincent and the Grenadines
WS : Samoa
SM : San Marino
ST : Sao Tome and Principe
SA : Saudi Arabia
SN : Senegal
RS : Serbia
SC : Seychelles
SL : Sierra Leone
SG : Singapore
SX : Sint Maarten (Dutch part)
SK : Slovakia
SI : Slovenia
SB : Solomon Islands
SO : Somalia
ZA : South Africa
GS : South Georgia and the South Sandwich Islands
SS : South Sudan
ES : Spain
LK : Sri Lanka
SD : Sudan (the)
SR : Suriname
SJ : Svalbard and Jan Mayen
SZ : Swaziland
SE : Sweden
CH : Switzerland
SY : Syrian Arab Republic
TW : Taiwan (Province of China)
TJ : Tajikistan
TZ : Tanzania, United Republic of
TH : Thailand
TL : Timor-Leste
TG : Togo
TK : Tokelau
TO : Tonga
TT : Trinidad and Tobago
TN : Tunisia
TR : Turkey
TM : Turkmenistan
TC : Turks and Caicos Islands (the)
TV : Tuvalu
UG : Uganda
UA : Ukraine
AE : United Arab Emirates (the)
GB : United Kingdom of Great Britain and Northern Ireland (the)
UM : United States Minor Outlying Islands (the)
US : United States of America (the)
UY : Uruguay
UZ : Uzbekistan
VU : Vanuatu
VE : Venezuela (Bolivarian Republic of)
VN : Viet Nam
VG : Virgin Islands (British)
VI : Virgin Islands (U.S.)
WF : Wallis and Futuna
EH : Western Sahara*
YE : Yemen
ZM : Zambia
ZW : Zimbabwe

Integration with Bower

First of all, thanks for this helpful and useful project.

It would be great if it could be downloaded as Bower dependency.

Thanks
Nabil

Flag for europe

Hi, it there any way you could add a flag for the European union?

China flag needs some rework

First of all thanks for this great library!

We need a better flag for PRC China. I will submit one if I can find a good & free SVG replacement.

Why is there no flag for en?

Hi, i am implementing this code in my application, and my languages are: hr, en and it.
en stands for english and I want to show the gb or us flag, but I get none using en.

Could you make something to set a default flag for en so that I don't have to check in my code whether the language is en and then set us flag or gb flag.

In every application language is en, it does not make sense that you don't offer a default flag for en.

US Virgin Islands flag

It appears that the British Virgin Islands are in there twice. ''vi.svg" should be the US Virgin Islands flag.

Share project via Packagist.org

This would be a great addition to my Symfony project, which makes use of Composer to handle the package dependencies.

Any option that this project can be required via Packagist.org ?

failed to install via npm

It would be nice to be able to install via NPM, currently it throws errors when I do npm install lipis/flag-icon-css :

npm ERR! addLocal Could not install /var/folders/6t/5077bgf135d9kwn848lk8z5m0000gn/T/npm-18640-98429318/git-cache-b6b57c9d6dc4/bf0d0e51fa3839d049ffbf4c25b11d7259e4503c
npm ERR! addLocal Could not install /var/folders/6t/5077bgf135d9kwn848lk8z5m0000gn/T/npm-18640-98429318/git-cache-f7cb5d845bea/bf0d0e51fa3839d049ffbf4c25b11d7259e4503c

<IE8 Support

Hello,

Are you looking to add IE8 support, as SVG and background image size are not supported?

It would be good to have some fallbacks for the older browsers.

Unfortunately I didn't have time to implement one, so had to use 'gulp-svg2png' to convert the files to PNGs. In fact upon doing this I noticed another issue that 2 or 3 of the images where missing the xml line from the top of the file, which caused the conversion to crash. Might be something you want to update the images with too.

Thanks

Some wrong flags

Can I add a new flag?

How can I add a new flag?
I tried to add to the css file a new flag-icon-empty and also a new "empty.svg" file but it doesn't work.

Republic of Kosovo alpha 2 code is incorrect or missing

The Republic of Kosovo has as Alpha 2 Code xk. I cannot seem to find that icon or it may be that is just under a different country code, but according to Geo Names it should be xk.

Could you please verify that it's there or add it if it is not @lipis ? Great pack by the way 👍

The only suggestions I would have is if the icons could be a SVG sprite instead of individual files, that way if you have to use all the flags on the page you have less requests (1 over 250 +), but that is just me :)

There are no flags

I didn't find some flags:

zr - Zaire
yu - Yugoslavia
uk - United Kingdom
tp - East Timor

Thanks.

CDNs

I notice that the version of this on jsDelivr is back at 0.6.0. It would also be wonderful to see this on cdnjs as some of your other work is.

Cheers :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.