flag-icon-css - npm Package Compare versions

Comparing version 3.5.0 to 4.0.0

.prettierrc.json

 {
   "arrowParens": "avoid",
   "bracketSpacing": false,
-  "jsxBracketSameLine": false,
   "printWidth": 80,
-  "proseWrap": "preserve",
+  "proseWrap": "never",
   "requirePragma": false,
@@ -8,0 +7,0 @@ "semi": true,

assets/docs.js

@@ -0,13 +1,53 @@
+loadJSON = (path, callback) => {
+  var xobj = new XMLHttpRequest();
+  xobj.overrideMimeType('application/json');
+  xobj.open('GET', path, true);
+  xobj.onreadystatechange = function () {
+    if (xobj.readyState == 4 && xobj.status == '200') {
+      callback(xobj.responseText);
+    }
+  };
+  xobj.send(null);
+};
+
 window.onload = function () {
-  $('.all-flags .flag-icon-background').click(function(event){
-    var flag = $(event.currentTarget).attr('title');
-    var w = 640;
-    var h = 480;
-    var left = (screen.width / 2) - (w / 2);
-    var top = (screen.height / 2) - (h / 2);
+  const flagsRow = document.getElementById('flags');
+  loadJSON('country.json', response => {
+    const countries = JSON.parse(response);
+    for (country of countries) {
+      console.log(country);
+      const colDiv = document.createElement('div');
+      colDiv.classList.add('col-xl-2');
+      colDiv.classList.add('col-lg-3');
+      colDiv.classList.add('col-md-4');
+      colDiv.classList.add('col-6');
+      const flagDiv = document.createElement('div');
+      flagDiv.classList.add('flag');
 
-    if (flag) {
-      window.open('flags/4x3/' + flag + '.svg', 'flag-4x3', 'width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
+      // Code
+      const codeSpan = document.createElement('span');
+      codeSpan.classList.add('flag-code');
+      const code = document.createTextNode(
+        country.flag_4x3.substr(10).replace('.svg', ''),
+      );
+      codeSpan.appendChild(code);
+
+      //Country
+      const countryDiv = document.createElement('div');
+      countryDiv.classList.add('flag-country');
+      countryDiv.classList.add('no-wrap');
+      countryDiv.title = country.name;
+      const countryName = document.createTextNode(country.name);
+      countryDiv.appendChild(codeSpan);
+      countryDiv.appendChild(countryName);
+      const flagImg = document.createElement('img');
+      flagImg.classList.add('flag-img');
+      flagImg.src = country.flag_4x3;
+
+      colDiv.appendChild(flagDiv);
+      flagDiv.appendChild(countryDiv);
+      flagDiv.appendChild(flagImg);
+      flagsRow.appendChild(colDiv);
     }
   });
-}
+};

package.json

 {
   "name": "flag-icon-css",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "author": "Panayiotis Lipiridis <[e-mail]>",
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "http://opensource.org/licenses/MIT"
-    }
-  ],
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "http://github.com/lipis/flag-icon-css"
+    "url": "http://github.com/lipis/flag-icons"
   },
   "devDependencies": {
-    "grunt": "1.1.0",
-    "grunt-contrib-connect": "2.1.0",
-    "grunt-contrib-cssmin": "3.0.0",
-    "grunt-contrib-less": "2.0.0",
-    "grunt-contrib-watch": "1.1.0",
-    "husky": "4.2.5",
-    "lint-staged": "10.2.9",
-    "prettier": "2.0.5",
+    "http-server": "14.0.0",
+    "less": "4.1.2",
+    "prettier": "2.4.1",
     "svgo": "1.3.2"
   },
-  "lint-staged": {
-    "*.{json,md,scss,less,yaml,yml}": [
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "scripts": {
-    "build": "grunt build",
+    "build": "yarn build:dev && yarn build:min",
+    "build:dev": "lessc less/flag-icons.less > css/flag-icons.css",
+    "build:min": "lessc -x less/flag-icons.less > css/flag-icons.min.css",
+    "start": "http-server -a localhost -p 8000",
     "svgo": "svgo --pretty --indent=2 --precision=1 --config=svgo.yaml",
@@ -42,5 +25,5 @@ "svgo:min": "find flags | grep '\\.svg$' | xargs -Iz -n 1 svgo --config=svgo.yaml z",
     "fix": "yarn prettier --write",
-    "prettier": "prettier \"**/*.{json,md,scss,less,yaml,yml}\"",
+    "prettier": "prettier \"**/*.{html,json,md,scss,less,yaml,yml}\"",
     "test": "yarn prettier --list-different"
   }
 }

README.md

@@ -1,14 +0,11 @@
-# flag-icon-css
+# flag-icons
 
-> A collection of all country flags in SVG — plus the CSS for easier integration.
-> See the [demo](https://flagicons.lipis.dev).
+> A collection of all country flags in SVG — plus the CSS for easier integration. See the [demo](https://flagicons.lipis.dev).
 
 ## Install
 
-You can either [download](https://github.com/lipis/flag-icon-css/archive/master.zip)
-the whole project as is or install it via Bower or NPM:
+You can either [download](https://github.com/lipis/flag-icons/archive/main.zip) the whole project as is or install it via NPM:
 
 ```bash
-$ bower install flag-icon-css
-$ npm install flag-icon-css
+$ npm install flag-icons
 ```
@@ -18,7 +15,3 @@
 
-For using the flags inline with text add the classes `.flag-icon` and
-`.flag-icon-xx` (where `xx` is the
-[ISO 3166-1-alpha-2 code](https://www.iso.org/obp/ui/#search/code/)
-of a country) to an empty `<span>`. If you want to have a squared version flag
-then add the class `flag-icon-squared` as well. Example:
+For using the flags inline with text add the classes `.flag-icon` and `.flag-icon-xx` (where `xx` is the [ISO 3166-1-alpha-2 code](https://www.iso.org/obp/ui/#search/code/) of a country) to an empty `<span>`. If you want to have a squared version flag then add the class `flag-icon-squared` as well. Example:
 
@@ -30,5 +23,3 @@ ```html
 
-You could also apply this to any element, but in that case you'll have to use the
-`flag-icon-background` instead of `flag-icon` and you're set. This will add the
-correct background with the following CSS properties:
+You could also apply this to any element, but in that case you'll have to use the `flag-icon-background` instead of `flag-icon` and you're set. This will add the correct background with the following CSS properties:
 
@@ -41,21 +32,12 @@ ```css
 
-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.
+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 `npm install` to install the dependencies after cloning the project and
-you'll be able to:
+Run the `yarn` to install the dependencies after cloning the project and you'll be able to:
 
-To watch for changes and live reload if served
-
-```bash
-$ grunt
-```
-
 To build `*.less` files
 
 ```bash
-$ grunt build
+$ yarn build
 ```
@@ -66,43 +48,9 @@
 ```bash
-$ grunt connect
+$ yarn start
 ```
 
-To have only specific countries in the css file, remove the ones that you don't
-need from the
-[`flag-icon-list.less`](https://github.com/lipis/flag-icon-css/blob/master/less/flag-icon-list.less)
-file and build it again.
+To have only specific countries in the css file, remove the ones that you don't need from the [`flag-icon-list.less`](https://github.com/lipis/flag-icons/blob/master/less/flag-icon-list.less) file and build it again.
 
 ## Credits
 
-This project wouldn't exist without the awesome and now deleted collection of
-SVG flags by [koppi](https://github.com/koppi).
-
-## Contributors
-
-### Code Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/lipis/flag-icon-css/graphs/contributors"><img src="https://opencollective.com/lipis/contributors.svg?width=890&button=false" /></a>
-
-### Financial Contributors
-
-Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/lipis/contribute)]
-
-#### Individuals
-
-<a href="https://opencollective.com/lipis"><img src="https://opencollective.com/lipis/individuals.svg?width=890"></a>
-
-#### Organizations
-
-Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/lipis/contribute)]
-
-<a href="https://opencollective.com/lipis/organization/0/website"><img src="https://opencollective.com/lipis/organization/0/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/1/website"><img src="https://opencollective.com/lipis/organization/1/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/2/website"><img src="https://opencollective.com/lipis/organization/2/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/3/website"><img src="https://opencollective.com/lipis/organization/3/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/4/website"><img src="https://opencollective.com/lipis/organization/4/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/5/website"><img src="https://opencollective.com/lipis/organization/5/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/6/website"><img src="https://opencollective.com/lipis/organization/6/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/7/website"><img src="https://opencollective.com/lipis/organization/7/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/8/website"><img src="https://opencollective.com/lipis/organization/8/avatar.svg"></a>
-<a href="https://opencollective.com/lipis/organization/9/website"><img src="https://opencollective.com/lipis/organization/9/avatar.svg"></a>
+This project wouldn't exist without the awesome and now deleted collection of SVG flags by [koppi](https://github.com/koppi).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4976591

increased by0.65%

Dev dependency count

4

decreased by-55.56%

Lines of code

5478

increased by186.21%

Worsened metrics

Number of package files

542

decreased by-0.18%

Number of lines in readme file

53

decreased by-49.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes