You are probably looking for the
https://github.com/lipis/flag-icons SVG flag library.
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 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
Tiny 16 x 11 PNG icons
4:3 ratio SVG
Square ratio SVG
- 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.
-
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' }
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 |
- Loading notification, or default image.
- Compact/minify SVG files
For detailed changelog, check Releases.
MIT License © Steven Skelton