Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Blade Flags

Blade Flags Laravel Package

outhebox/blade-flags

1,759 SVG country and language flags for Laravel Blade plus Vue, React, and vanilla JS. Includes default, circle, and flat variants, 128 language mappings, and locale/regional support (e.g., en-US, fr-CA). Great for switchers and forms.

View on GitHub
Deep Wiki
Context7

SVG country & language flags for Laravel Blade, Vue, React, and vanilla JS — 1,759 flags in 3 styles (rounded, circle, flat)

Frequently asked questions about Blade Flags
How do I install Blade Flags in Laravel?
Run `composer require outhebox/blade-flags` and `npm install @blade-flags/core` (or `@blade-flags/vue`/`@blade-flags/react`). Register the Blade components via `blade-flags.php` config, then use `<x-flag-country-{code} />` in Blade views. No service provider changes are needed.
Does Blade Flags work with Laravel 13?
Yes, Blade Flags supports Laravel 9.x–13.x. Ensure PHP 8.0+ is used. For Laravel 13, verify Blade Icons (v2.0+) compatibility, as it’s a required dependency for Blade features.
Can I use these flags dynamically (e.g., from a user’s country field)?
Absolutely. Use Blade’s `@svg()` directive or PHP helpers like `resolveFlag()` to fetch flags dynamically. For frontend frameworks, pass the country code as a prop (e.g., `<Flag :code="user.country" />`). Cache resolved flags if performance is critical.
What are the differences between default, circle, and flat flag variants?
Default flags are rounded (264 countries, 281 languages), circle flags are circular (405 countries, 275 languages), and flat flags are 4:3 aspect ratio (270 countries, 264 languages). Choose based on UI needs—circle works well for avatars, flat for forms.
Will Blade Flags bloat my Laravel app’s asset size?
Published SVGs (~1.7K files) can increase size, but tree-shaking in JS (via `@blade-flags/core`) or selective publishing mitigates this. Only publish the variants you need (e.g., `circleFlags` for Vue/React). For Blade-only apps, assets are minimal.
How do I customize language-country mappings (e.g., override ‘en’ to ‘en-US’)?
Publish the config with `php artisan vendor:publish --tag=blade-flags-config`, then edit `blade-flags.php`. Override the `language_country_map` array and regenerate SVGs if needed. This is declarative and version-controlled.
Is there support for regional variants like `fr-CA` (French-Canada) vs. `fr-FR`?
Yes, Blade Flags includes 128 language mappings with regional support (e.g., `en-US`, `fr-CA`). Use the `language_country_map` config to define custom overrides or rely on the default mappings for consistency.
Can I use Blade Flags with Inertia.js and Vue/React?
First-class support exists. For Blade, use `<x-flag-country-{code} />`. For Vue/React, import `@blade-flags/vue` or `@blade-flags/react` and use `<Flag :code="user.country" />`. Flags render on both server (Blade) and client (Inertia.js).
What if I don’t want to use Blade Icons? Can I use Blade Flags without it?
Blade Icons (v2.0+) is mandatory for Blade features. If you’re not using it, upgrade Laravel 9+ to include it or use the JS packages (`@blade-flags/core`) for static `<img>` tags. Blade components won’t work without Blade Icons.
Are there alternatives to Blade Flags for Laravel flag icons?
Alternatives include `laravel-flag` (simpler but fewer variants) or `flag-icon-css` (manual SVG management). Blade Flags stands out for its Blade component integration, dynamic resolution, and multi-framework support (Vue/React/JS). Evaluate based on your need for variants and runtime flexibility.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
hamzi/corewatch
minionfactory/raw-hydrator
hexters/coinpayment
rjcodes/rjcms
act-training/laravel-permissions-manager
alimarchal/laravel-chart-of-accounts
babenkoivan/elastic-scout-driver
mkwebdesign/filament-watchdog-v5
renatomarinho/laravel-page-speed
zedmagdy/filament-business-hours
renatovdemoura/blade-elements-ui
devgeek/beacon-admin
benjamin-rqt/data-watcher-bundle
atriumphp/atrium
sandermuller/package-boost-laravel
sandermuller/boost-skills
redaxo/core
yusufgenc/filament-api-forge
l3aro/rating-star-for-filament
leek/filament-subtenant-scope