332 lines
26 KiB
Markdown
332 lines
26 KiB
Markdown
|
<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 https://github.com/lipis/flag-icon-css
|
||
|
|
|
||
|
|
|
||
|
|
Typical file sizes:
|
||
|
|
|
||
|
|
> **SVG** files: **2kb** to **75kb**
|
||
|
|
|
||
|
|
> **PNG** files: 16x11 < **1kb**, 36x27 < **2kb**, 75x56 < **5kb**, 225x168 < **20kb**
|
||
|
|
|
||
|
|
### [Countries](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/countries.html)
|
||
|
|
|
||
|
|
_Tiny 16 x 11 PNG icons_
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
_4:3 ratio SVG_
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
_Square ratio SVG_
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### States and Provinces
|
||
|
|
|
||
|
|
#### [United States](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/us-states.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Australia](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/canada-australia.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Brazil](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/brazil.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Canada](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/canada-australia.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Germany](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/germany.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Spain](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/spain.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#### [Russia](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/russia.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### [NASCAR, IndyCar](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/racing.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
### [Maritime and International Code of Signals](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/maritime.html)
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
* Images come from [famfamfam](http://www.famfamfam.com/lab/icons/flags/) icon library, or generated from SVG.
|
||
|
|
* SVGs come from [Wikimedia Commons](http://commons.wikimedia.org/wiki/Category:SVG_sovereign_state_flags).
|
||
|
|
* PNGs are compacted using [pngcrush](http://en.wikipedia.org/wiki/Pngcrush).
|
||
|
|
* [ISO 3166-1 Country Code](http://en.wikipedia.org/wiki/ISO_3166-1) list is available on Wikipedia.
|
||
|
|
|
||
|
|
## Demos
|
||
|
|
|
||
|
|
> [Live Demo - General Use](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/index.html)
|
||
|
|
|
||
|
|
> [Live Demo - Themes and Popover](http://files.stevenskelton.ca/flag-icon/flag-icon/examples/themes.html)
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
1. Add the library using the Javascript package manager [Bower](http://bower.io/):
|
||
|
|
|
||
|
|
```bower install --save flag-icon```
|
||
|
|
|
||
|
|
2. Import Web Components' polyfill:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Import Custom Element:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<link rel="import" href="bower_components/flag-icon/flag-icon.html">
|
||
|
|
```
|
||
|
|
|
||
|
|
4. Start using it!
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
5. Or use it unrendered in scripts:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
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
|
||
|
|
`img` | *attribute* | `false` | Use PNGs instead of larger filesize SVG
|
||
|
|
`width` | *integer* | `16` | Width of icon (aspect ratio maintained if `height` omitted).
|
||
|
|
`height` | *integer* | _auto_ | Height of icon (aspect ratio maintained if `width` omitted).
|
||
|
|
`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](https://github.com/stevenrskelton/flag-icon/releases).
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
[MIT License](http://opensource.org/licenses/MIT) © Steven Skelton
|