Download the PHP package outhebox/blade-flags without Composer
On this page you can find all versions of the php package outhebox/blade-flags. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download outhebox/blade-flags
More information about outhebox/blade-flags
Files in outhebox/blade-flags
Package blade-flags
Short Description A package to easily make use of country & language flags in your Laravel Blade views.
License MIT
Homepage https://github.com/MohmmedAshraf/blade-flags
Informations about the package blade-flags
Laravel | Vue | React | Vanilla JS | Variants | Contributing
Introduction
1,759 SVG country and language flags for Laravel Blade, Vue, React, and vanilla JavaScript. Three flag styles, 128 language mappings, and full support for regional variants like ar-sa, en-us, and fr-ca. Works great with Inertia.js.
Use them anywhere — locale switchers, address forms, dashboards, or admin panels.
| Variant | Blade | JS import | Countries | Languages | Source |
|---|---|---|---|---|---|
| Default (rounded) | <x-flag-country-us /> |
defaultFlags |
264 | 281 | TwEmoji |
| Circle | <x-flag-circle-country-us /> |
circleFlags |
405 | 275 | circle-flags |
| Flat (4:3) | <x-flag-flat-country-us /> |
flatFlags |
270 | 264 | flag-icons |
For a full list of available icons see the SVG directories: flat.
Installation
Laravel / Blade
Requires PHP 8.0+ and Laravel 9+. Uses Blade Icons under the hood — see their readme for caching and additional features.
Watch a 3-minute video by Povilas Korop showcasing the package.
Icons can be used as self-closing Blade components which will be compiled to SVG icons.
Default (Rounded Rectangle)
...produces this:
...produces this:
Circle
...produces this:
...produces this:
Flat (4:3 Rectangle)
...produces this:
...produces this:
Classes & Attributes
You can pass classes to any variant:
Dynamic Icons
For dynamic icon names (e.g. from a database or variable), use the @svg Blade directive:
Or the svg() helper in PHP:
Raw SVG Icons
Publish the raw SVG files as public assets:
Then use them in your views:
Configuration
Blade Flags also offers the ability to use features from Blade Icons like default classes, default attributes, etc. If you'd like to configure these, publish the blade-flags.php config file:
Language Flag Overrides
By default, language flags use the country mappings defined in config/language-countries.json (e.g. ar → UAE, en → UK). You can override these defaults per-language:
-
Publish the config file:
-
Edit
config/blade-flags.phpto set your preferred mappings: - Publish the SVG assets and apply your overrides:
The blade-flags:generate command reads the package defaults, merges your overrides, and regenerates the language flag SVGs in the published vendor directories.
Vue
Works with Vue 3.3+. Ideal for Inertia.js apps.
React
Works with React 18+.
Vanilla JS
Use @blade-flags/core directly in any JavaScript or TypeScript project:
Tree-Shaking & Bundle Size
Every flag is a named export. If you know which flags you need at build time, import them directly — your bundler will tree-shake the rest:
Flag names follow the pattern country{Code} and language{Code} in camelCase:
| SVG key | Named export | Type |
|---|---|---|
country-us |
countryUs |
Country |
country-gb-eng |
countryGbEng |
Country (region) |
language-ar |
languageAr |
Language |
language-ar-sa |
languageArSa |
Language (regional) |
For dynamic use (code comes from a database or API), import the full variant map. The Flag component uses this approach:
| Import style | When to use | Bundle impact |
|---|---|---|
import { countryUs } from '.../circle' |
You know the flags at build time | Only the flags you import |
import { circleFlags } from '.../circle' |
Code is dynamic (from data/API) | All flags in the variant |
Flag Variants
Import only the variant you need:
| Package | Description |
|---|---|
@blade-flags/core |
SVG strings as JS modules + resolveFlag() helper |
@blade-flags/vue |
<Flag> component for Vue 3 (peer dep: vue ^3.3) |
@blade-flags/react |
<Flag> component for React 18+ (peer dep: react ^18 \| ^19) |
The AutoFlag convenience component accepts a variant string prop but bundles all variants:
Disclaimer
This package aims for broad compatibility by mirroring upstream flag collections. Inclusion of any flag does not imply endorsement. The author of this package stands with Palestine (the Palestine flag is featured in the project cover). If you want to exclude specific flags, you can do so in your application/UI, or exclude them during the build via bin/build.sh.
Contributing
Please see CONTRIBUTING for details.
License
Blade Flags is open-sourced software licensed under the MIT license.
All versions of blade-flags with dependencies
blade-ui-kit/blade-icons Version ^1.1
ext-json Version *
illuminate/support Version ^8.0|^9.0|^10.0|^11.0|^12.0|^13.0