flag-icon:
[ This description is mirrored from README.md at github.com/Protoss78/flag-icon on 2019-05-22 ]
flag-icon
A collection of SVG flags, conveniently usable as a Polymer Web Component.
If you don’t care about extra features, a simple CSS implementation of country flags can be found at GitHub - lipis/flag-icons: 🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration
Typical file sizes:
SVG files: 2kb to 75kb
- Images come from famfamfam icon library, or generated from SVG.
- SVGs come from Wikimedia Commons.
- ISO 3166-1 Country Code list is available on Wikipedia.
Component Page
Usage
-
Add the library using the Javascript package manager Bower:
bower install --save flag-icon -
Import Web Components’ polyfill:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> -
Import Custom Element:
<link rel="import" href="bower_components/flag-icon/flag-icon.html"> -
Start using it!
<flag-icon key="ca"></flag-icon> <flag-icon key="canada"></flag-icon> <flag-icon key="124"></flag-icon> <!-- specify to use PNGs --> <flag-icon key="ca" img></flag-icon> <!-- specify a specific size --> <flag-icon key="ca" width="100"></flag-icon> <!-- Specify alt & title text, otherwise it defaults to the official country name --> <flag-icon key="can">Flag of Canada</flag-icon> -
Or use it unrendered in scripts:
var f = new FlagIcon(); //get country info f.findCountry('canada') //> { name: 'Canada', alpha2: 'CA', alpha3: 'CAN', numeric: 124 } //convert between 2 -> 3 letter character codes f.findCountry('ca').alpha3 //> 'CAN' //get full names of states or provinces f.findUSState('ca') //> { name: 'California', iso: 'US-CA', alpha2: 'CA', numeric: 6, gpo: 'Calif.' } f.findCanadianProvince('ON') //> { name: 'Ontario', alpha2: 'ON' }
Options
| Attribute | Type | Default | Description |
|---|---|---|---|
key |
string | null |
Proper, common, ISO 3166-1 alpha-2, alpha-3, or country code |
au |
boolean | false |
 Australian State flags |
br |
boolean | false |
 Brazilian State flags |
ca |
boolean | false |
 Canadian Province and Territory flags |
de |
boolean | false |
 German State flags |
es |
boolean | false |
 Spain Autonomous Community flags |
ru |
boolean | false |
 Russian Republics, Krais, and Oblast flags |
us |
boolean | false |
 US State flags |
maritime |
boolean | false |
Maritime and ICS flags |
racing |
boolean | false |
NASCAR and IndyCar racing flags |
square |
boolean | false |
Use square version instead of 4:3 aspect (only valid for country flags) |
aspect |
float | Override aspect ratio used to render the flag |
Aspect Ratios for Flags
Flags come in all different shapes and sizes, attempts were made to standardize to the following aspect ratios (width:height)
| Attribute | Aspect |
|---|---|
| Country | 4:3 |
| Austrialia | 2:1 |
| Brazil | 3:2 |
| Canada | 2:1 |
| Germany | 5:3 |
| Spain | 3:2 |
| US | 3:2 |
| Russia | 3:2 |
| NASCAR, IndyCar | 4:3 |
| Maritime | 1:1 |
Todo
- Loading notification, or default image.
- Compact/minify SVG files
History
For detailed changelog, check Releases.
License
MIT License © Steven Skelton