flag-icon

A fork of the original stevenrskelton/flag-icon 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

Usage

<dom-bind id="app">
    <template id="t">
        <paper-card heading="Flag Icon Search Demo">
            <div class="card-content">
                <paper-input id="searchBox" label="Search a country" value="{{searchValue}}"></paper-input>
                <p>JSON Result:</p>
                <p id="output"></p>
            </div>
            <div class="card-actions">
                <flag-icon id="flagIcon" class="bigFlag" key="{{searchValue}}">Big Flag Sample</flag-icon>
            </div>
        </paper-card>
    </template>
</dom-bind>
<script>
    var t = document.querySelector('#t');
    var flag = document.querySelector('#flagIcon');
    var searchBox = document.querySelector('#searchBox');
    var output = document.querySelector('#output');
    var searchFunction = function () {
        output.innerText = JSON.stringify(flag.findCountry(searchBox.value));
    };
    searchBox.addEventListener('change', searchFunction);
    searchBox.addEventListener('keyup', searchFunction);
</script>

License

MIT License © Steven Skelton