Repository files navigation

This is an undated Polymer 0.5.5 Web Component

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 athttps://github.com/lipis/flag-icon-css

Typical file sizes:

SVG files:2kb to75kb

PNG files: 16x11 <1kb, 36x27 <2kb, 75x56 <5kb, 225x168 <20kb

Tiny 16 x 11 PNG icons

4:3 ratio SVG

Square ratio SVG

• Images come fromfamfamfam icon library, or generated from SVG.
• SVGs come fromWikimedia Commons.
• PNGs are compacted usingpngcrush.
• ISO 3166-1 Country Code list is available on Wikipedia.

Live Demo - General Use

Live Demo - Themes and Popover

1. Add the library using the Javascript package managerBower:

   bower install --save flag-icon

2. Import Web Components' polyfill:

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

3. Import Custom Element:

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

4. Start using it!

   <flag-iconkey="ca"></flag-icon><flag-iconkey="canada"></flag-icon><flag-iconkey="124"></flag-icon><!-- specify to use PNGs --><flag-iconkey="ca"img></flag-icon><!-- specify a specific size --><flag-iconkey="ca"width="100"></flag-icon><!-- Specify alt & title text,     otherwise it defaults to the official country name --><flag-iconkey="can">Flag of Canada</flag-icon>

5. Or use it unrendered in scripts:

   varf=newFlagIcon();//get country infof.findCountry('canada')//> { name: 'Canada', alpha2: 'CA', alpha3: 'CAN', numeric: 124 }//convert between 2 -> 3 letter character codesf.findCountry('ca').alpha3//> 'CAN'//get full names of states or provincesf.findUSState('ca')//> { name: 'California', iso: 'US-CA', alpha2: 'CA', numeric: 6, gpo: 'Calif.' }f.findCanadianProvince('ON')//> { name: 'Ontario', alpha2: 'ON' }

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 ifheight omitted).
height	integer	auto	Height of icon (aspect ratio maintained ifwidth 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

Flags come in all different shapes and sizes, attempts were made to standardize to the following aspect ratios (width:height)

• Loading notification, or default image.
• Compact/minify SVG files

For detailed changelog, checkReleases.

MIT License © Steven Skelton