Gallery

<div class="demo demo--wide">
  <div class="demo-row">
    <input id="q" class="demo-input" type="search" placeholder="Filter by name or code, e.g. ae" aria-label="Filter flags" style="flex:1;min-width:160px">
    <div class="demo-seg" role="radiogroup" aria-label="Shape">
      <button role="radio" aria-checked="true" data-shape="rect">Rect</button>
      <button role="radio" aria-checked="false" data-shape="square">Square</button>
      <button role="radio" aria-checked="false" data-shape="circle">Circle</button>
    </div>
  </div>
  <p class="demo-hint" id="count"></p>
  <div id="grid" class="grid"></div>
</div>

import { FLAG_CODES, flagSvg } from 'https://devix.pk/cdn/oss/flag-icons@1.1.0/index.js';

const names = new Intl.DisplayNames(['en'], { type: 'region' });
const grid = document.getElementById('grid');
const q = document.getElementById('q');
let shape = 'rect';

function render() {
  const term = q.value.trim().toLowerCase();
  const shown = FLAG_CODES
    .map((code) => ({ code, name: names.of(code.toUpperCase()) ?? code }))
    .filter(({ code, name }) => !term || code.includes(term) || name.toLowerCase().includes(term));
  grid.innerHTML = shown.map(({ code, name }) => `<figure title="${name}">${flagSvg(code, { shape, radius: shape === 'rect' ? 1.4 : 0 })}<figcaption>${code}</figcaption></figure>`).join('');
  document.getElementById('count').textContent = `${shown.length} flags`;
}

q.addEventListener('input', render);
document.querySelectorAll('[data-shape]').forEach((button) =>
  button.addEventListener('click', () => {
    shape = button.dataset.shape;
    document.querySelectorAll('[data-shape]').forEach((b) => b.setAttribute('aria-checked', String(b === button)));
    render();
  }),
);
render();

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
figure { margin: 0; padding: 6px 2px; border-radius: 8px; text-align: center; }
figure:hover { background: var(--demo-surface); box-shadow: 0 0 0 1px var(--demo-line); }
figure svg { display: block; width: 32px; margin: 0 auto; box-shadow: 0 0 0 1px color-mix(in srgb, var(--demo-fg) 8%, transparent); border-radius: 2px; }
figcaption { margin-top: 3px; font: 10px var(--demo-mono); color: var(--demo-dim); }