• [x] England - gb-eng - svg
• [x] ~~Northern Ireland - gb-nir~~
• [x] Scotland - gb-sct
• [x] Wales - gb-wls - svg
• [x] Add new source files for new flags

https://en.wikipedia.org/wiki/ISO_3166-2:GB

Fixes #112

Hi! I'm opening an issue, but this is more like an idea. For distribution (bower, etc), I think that the flags could be minimized using tools like SVGO to reduce images, yet maintaining quality. I just made a quick test here and these are the results:

[ flag-icon-css/flags ] $ du -hx --max-depth=1
4.6M    ./1x1
3.6M    ./1x1.min
4.6M    ./4x3
3.7M    ./4x3

Rounding numbers, ~2M can be ripped of in production :)

Hope this helps!

Best regards, Richard.

Flag obtained from Wikimedia: https://commons.wikimedia.org/wiki/File:Flag_of_Galicia.svg

Also added this flag and the catalonian one to the index page.

BTW, thanks for the library!

A few of the flags have a pretty large file size due to overly complex vector shapes (especially the the flags of Serbia and the Dominican Republic, both almost 500kb). If look at this close-up of the Serbian flag you notice that there are way to many vector points and it can be dramatically simplified.

https://en.wikipedia.org/wiki/Flag_of_the_United_Kingdom#/media/File:Flag_of_the_United_Kingdom.svg https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/gb.svg https://github.com/lipis/flag-icon-css/blob/master/flags/1x1/gb.svg

Hi, great job! Did you think about add also the ISO 3166-1 alpha-3 code? It should be not so difficult... something like this: before:

.flag-icon-it {
  background-image: url(../flags/4x3/it.svg);
}

after

.flag-icon-it, .flag-icon-ita  {
  background-image: url(../flags/4x3/it.svg);
}

Thankyou!

Hello, I only have the 1x1 flag appearing... Am I doing wrong? I am using angular 9:

<span *ngFor="let lang of languages" (click)="frame.show()" class="flag-icon flag-icon-{{lang.isocode}}"></span>

I installed using standard npm install Thanks.

UPDATE I replaced the pics from the 3x4 folder into the 1x1 folder and now it work.. i have no idea why it charge the wrong folder....

I have missed the possibility to get a flag by the language. So i added .flag-icon-lang-en

Here is the new flag-icon-base.scss:

$countries: (
dj: "aa", ru: "ady", na: "af", gh: "ak", et: "am", sy: "arc", in: "as", tr: "av", bo: "ay", az: "az", om: "bal", by: "be", zm: "bem", bg: "bg", mu: "bho", vu: "bi", ml: "bm", fr: "br", pk: "brh", ba: "bs", es: "ca", fm: "chk", sg: "cmn", cz: "cs", cs: "cu", is: "da", tg: "dag", de: "de", ne: "dje", cn: "dta", mv: "dv", bt: "dz", al: "el", gb: "en", ee: "et", ae: "fa", gm: "ff", no: "fi", sd: "fia", mp: "fil", fj: "fj", dk: "fo", mr: "fuc", wf: "fud", md: "gag", ki: "gil", ar: "gn", im: "gv", tw: "hak", us: "haw", il: "he", sr: "hns", pg: "ho", at: "hr", ht: "ht", hu: "hu", am: "hy", id: "id", ng: "ig", it: "it", ca: "iu", jp: "ja", ge: "ka", cd: "kg", kz: "kk", gl: "kl", kh: "km", iq: "ku", er: "kun", kg: "ky", va: "la", lu: "lb", ug: "lg", la: "lo", lt: "lt", lv: "lv", sl: "men", eh: "mey", mg: "mg", mh: "mh", ck: "mi", mk: "mk", mn: "mn", mt: "mt", pt: "mwl", mm: "my", nr: "na", zw: "nd", nu: "niu", nl: "nl", za: "nr", mw: "ny", bq: "pap", pw: "pau", pl: "pl", gw: "pov", af: "ps", ch: "rm", bi: "rn", me: "rom", rw: "rw", cf: "sg", si: "sh", lk: "si", as: "sm", se: "sma", fi: "smn", rs: "sr", td: "sre", ls: "st", tl: "tet", tj: "tg", my: "th", tk: "tkl", tv: "tvl", pf: "ty", ua: "uk", vn: "vi", mz: "vmw"
);


@mixin flag-icon-background {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon {
    @include flag-icon-background();
    position: relative;
    display: inline-block;
    width: (4 / 3) * 1em;
    line-height: 1em;
    &:before {
        content: '\00a0';
    }
    &.flag-icon-squared {
        width: 1em;
    }
}

@mixin flag-icon($country) {
    .flag-icon-#{$country} {
        background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
        &.flag-icon-squared {
            background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
        }
    }
    $langCountry: map-get($countries, $country);
    @if $langCountry != '' {
        .flag-icon-lang-#{$langCountry} {
            background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
            &.flag-icon-squared {
                background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
            }
        }
    }
}

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 ?

Despite successfull npm install, some countries such as nu.svg, nz.svg, np.svg are causing npm start failure.

Here is the error I'm getting:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/flag-icon-css/css/flag-icon.css (Emitted value instead of an instance of Error) CssSyntaxError: F:\repositories\platformui\node_modules\flag-icon-css\css\flag-icon.css:1042:1393: Can't resolve '%23c' in 'F:\repositories\platformui\node_modules\flag-icon-css\css'

If I comment these flags in node_modules, the server successfully starts.

Environment: Windows 10 npm --version 5.6.0

Below is the package.json:

{
  "name": "indigitaUI",
  "version": "1.0.0-snapshot",
  "description": "indigita UO",
  "author": "indigita SA",
  "url": "https://www.indigita.ch",
  "copyright": "",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/common": "5.1.0",
    "@angular/compiler": "5.1.0",
    "@angular/core": "5.1.0",
    "@angular/forms": "5.1.0",
    "@angular/http": "5.1.0",
    "@angular/platform-browser": "5.1.0",
    "@angular/platform-browser-dynamic": "5.1.0",
    "@angular/router": "5.1.0",
    "@angular/upgrade": "5.1.0",
    "@swimlane/ngx-charts": "^7.0.1",
    "angular2-jwt": "0.2.3",
    "bootstrap": "^4.0.0-beta",
    "chart.js": "2.7.1",
    "core-js": "2.5.1",
    "d3": "^4.12.0",
    "flag-icon-css": "^2.9.0",
    "jquery": "^3.2.1",
    "moment": "2.19.3",
    "ng2-charts": "1.6.0",
    "ngx-bootstrap": "2.0.0-beta.10",
    "popper.js": "^1.12.9",
    "primeng": "^5.0.2",
    "rxjs": "5.5.5",
    "spinkit": "1.2.5",
    "tether": "^1.4.3",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.2",
    "@angular/compiler-cli": "5.1.0",
    "@types/jasmine": "2.8.2",
    "@types/node": "8.0.56",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.2.1",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2"
  }
}

• AC and TA use St. Helena (SH) flag
• CP uses France (FR) flag
• DG uses British Indian Ocean Territory (IO) flag
• EA uses Spain (ES) flag
• IC uses new flag

Defined by Emoji 1.0 spec, closes #729, closes #537

Thats's the wrong flag, (ac Ascension Island) the correct one is: https://en.wikipedia.org/wiki/Ascension_Island#/media/File:Flag_of_Ascension_Island.svg

Hi,

I'm having issue with putting a border around the flag icon. Their is some space above and below the flag icon if i put some border around the icon.

For example in this screen shot you can see the white space on above and below the icon

The reason to put border is to distinguish the flag and background, like in this case:

Thanks

Some flags are corrupted when SVG icons are inlined into the page HTML.

Codepen: https://codepen.io/vovayatsyuk/pen/eYrPXgW?editors=1000

1. At the initial page load, the Honduras flag is corrupted.
2. When changing sort order by clicking on the table header Cameroon and Indian flags get corrupted.

Screenshot:

Possible solution

Use unique ids to prevent collisions. I've already done that in my laravel package

If you are interested in this change I'll open PR with updated icons.

Sometimes a sort of A character gets rendered over top the flag. I figured this is due to the :before content (which is 00a0) being interpreted as ISO-8859-1 instead of UTF-8 which results in a sort of A character instead of nbsp. I have found this stackoverflow issue about it. I can confirm that the CSS output from webpack does have 0xC2 in front of 0xA0 which, again, sometimes gets rendered as that A character.

Have you seen this before? I tried setting the @charset in my base SCSS file but that didn't seem to solve it.