fix(panel): render country/language flags as SVG (flag-icons)#2577
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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+1F1E7for 🇬🇧). 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 byflag-icons— keyed by the ISO-2 codes already in the data, so they render identically on every OS.Wired into every flag surface:
Comboboxoptions gained an optional per-optionflag)flagForLanguage()(returned an emoji string) becomesregionForLanguage()(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/, butbuildDirectory: 'build'baked a/build/base intourl()references. Entry CSS/JS were unaffected only because Laravel's@viterewrites those from the manifest — CSS-internalurl()can't be rewritten.Pinned the build-time Vite
baseto the real serve path (dev untouched). This hardens the panel for any bundledurl()asset going forward, not just flags.Notes for reviewers
flag-icons@^7.5.0.<Flag>is intentionally not added to the publicui.tsadd-on barrel — kept internal for now.npm install+npm run buildinpackages/panelafter checkout.Verification
/vendor/lunar-panel/build/assets/…svgand the SVG is reachable through the asset symlink.🤖 Generated with Claude Code