ZwiiCMS/core/vendor/icon-flags

<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

Tiny 16 x 11 PNG icons

4:3 ratio SVG

Square ratio SVG

States and Provinces

United States

Australia

Brazil

Canada

Germany

Spain

Russia

NASCAR, IndyCar

Maritime and International Code of Signals

• Images come from famfamfam icon library, or generated from SVG.
• SVGs come from Wikimedia Commons.
• PNGs are compacted using pngcrush.
• ISO 3166-1 Country Code list is available on Wikipedia.

Demos

Live Demo - General Use

Live Demo - Themes and Popover

Usage

1. Add the library using the Javascript package manager Bower:

   bower install --save flag-icon

2. Import Web Components' polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
   

3. Import Custom Element:

   <link rel="import" href="bower_components/flag-icon/flag-icon.html">
   

4. 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>
   

5. 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
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.

License

MIT License © Steven Skelton