Skip to content

fix(panel): render country/language flags as SVG (flag-icons)#2577

Merged
glennjacobs merged 1 commit into
2.xfrom
fix/panel-country-flags
Jul 21, 2026
Merged

fix(panel): render country/language flags as SVG (flag-icons)#2577
glennjacobs merged 1 commit into
2.xfrom
fix/panel-country-flags

Conversation

@glennjacobs

Copy link
Copy Markdown
Contributor

Problem

A contributor reported the country flags on the new Inertia panel didn't render — they showed as broken glyphs instead of flags.

The flags are emoji flag characters (regional-indicator pairs, e.g. U+1F1EC U+1F1E7 for 🇬🇧). Windows ships no flag glyphs in its emoji font, so every browser on Windows falls back to a replacement/boxed glyph. macOS/iOS render them, which is why it looked fine in development.

Fix

Render flags as SVG instead of relying on the OS emoji font, via a <Flag> component backed by flag-icons — keyed by the ISO-2 codes already in the data, so they render identically on every OS.

Wired into every flag surface:

  • Countries table (the reported screen)
  • URL slugs language column
  • Regions & tax-zones country chips and pickers (Combobox options gained an optional per-option flag)

flagForLanguage() (returned an emoji string) becomes regionForLanguage() (returns an ISO-2 region code). The one native <select> that showed an emoji in its option text (add-URL language picker) drops it — a native <option> can't hold an SVG, and plain text beats a broken glyph.

Vite base-path fix (why the SVGs still 404'd at first)

flag-icons is the first dependency to ship bundled CSS url() assets. They 404'd because the panel serves its assets from /vendor/lunar-panel/build/, but buildDirectory: 'build' baked a /build/ base into url() references. Entry CSS/JS were unaffected only because Laravel's @vite rewrites those from the manifest — CSS-internal url() can't be rewritten.

Pinned the build-time Vite base to the real serve path (dev untouched). This hardens the panel for any bundled url() asset going forward, not just flags.

Notes for reviewers

  • Adds one runtime dependency: flag-icons@^7.5.0.
  • <Flag> is intentionally not added to the public ui.ts add-on barrel — kept internal for now.
  • Requires npm install + npm run build in packages/panel after checkout.

Verification

  • vitest: 211 passed · type-check: clean · build: OK (flag SVGs emit as assets, load on demand)
  • Pint: passed · panel Pest suite: 684 passed
  • Confirmed rebuilt CSS references /vendor/lunar-panel/build/assets/…svg and the SVG is reachable through the asset symlink.

🤖 Generated with Claude Code

Emoji flag glyphs (regional-indicator pairs) don't render on Windows, so
country flags showed as broken glyphs. Replace them with a <Flag> component
backed by flag-icons (SVG, keyed by ISO-2), used across the Countries table,
URL slugs, and the regions/tax-zones country pickers. flagForLanguage() now
returns an ISO-2 region code (regionForLanguage) instead of an emoji string.

Also pin the build-time Vite base to the panel's real serve path
(/vendor/lunar-panel/build/). buildDirectory 'build' baked a /build/ base into
bundled CSS url() references, so flag-icons' SVGs 404'd; entry tags were
unaffected only because Laravel rewrites those from the manifest. This hardens
the panel for any bundled url() asset, not just flags.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@github-project-automation github-project-automation Bot moved this to Todo in Roadmap Jul 21, 2026
@glennjacobs
glennjacobs merged commit 4ff5d25 into 2.x Jul 21, 2026
23 checks passed
@glennjacobs
glennjacobs deleted the fix/panel-country-flags branch July 21, 2026 20:18
@github-project-automation github-project-automation Bot moved this from Todo to Done in Roadmap Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant