HTML data attributes

<!-- after domma.min.js -->
<script src="dist/domma-flags.min.js"></script>

<span data-flag="gb"></span>
<span data-flag="jp" data-flag-shape="circle"
      data-flag-size="48" data-flag-border></span>

<script>FL.scan();</script>

JavaScript API

// Render an SVG element
const svg = FL.render('fr', { size: 48, shape: 'rounded' });
document.body.appendChild(svg);

// Inject into a target
FL.inject('#country', 'de', { shape: 'circle', border: true });

// Search & list
FL.search('united');     // ['gb', 'us', 'ae']
FL.list('europe');       // ['gb', 'fr', 'de', ...]
FL.name('br');           // 'Brazil'

// Register your own / override
FL.register('eu', { name: 'European Union', region: 'europe',
    bg: '#003399',
    overlays: [{ type: 'star', cx: 30, cy: 20, r: 4, fill: '#FFCC00' }] });

// Build options from the registry, sorted by name
const codes = _.sortBy(FL.list(), c => FL.name(c));
codes.forEach(code => {
    $('#country-picker').append(
        `<option value="${code}">${FL.name(code)}</option>`
    );
});

// React to selection
$('#country-picker').on('change', function () {
    const code = $(this).val();
    FL.inject('#picker-flag', code,
        { size: 40, shape: 'rounded', border: true, position: 'replace' });
    $('#picker-name').text(FL.name(code));
    $('#picker-code').text(code.toUpperCase());
});