DOCSEARCHbyAlgolia
Submit Docs

Blade Flags

repository·main·Indexed 43 days ago

https://github.com/mohmmedashraf/blade-flags

A collection of 1,759 SVG country and language flags for Laravel (Blade), Vue, React, and vanilla JavaScript. Supports three visual styles—default, circle, and flat—and provides tree-shakeable JS modules via @blade-flags/core (v0.1.3), as well as dedicated components for React and Vue 3.

Tokens
10.7K
Snippets
41
Records
50
Agent score
53%

What's inside Blade Flags

  1. Choose the right @blade-flags package for your environment

    main

    Select the package that matches your runtime or framework:

    • @blade-flags/core: Provides SVG strings as JS modules and the resolveFlag() helper function.
    • @blade-flags/vue: Provides the <Flag> component for Vue 3 (requires vue ^3.3).
    • @blade-flags/react: Provides the <Flag> component for React 18+ (requires react ^18 | ^19).

  2. Tree-shaking and Bundle Optimization in JS

    main

    Every flag is a named export. To minimize bundle size, import only the specific flags you need at build time instead of importing the entire variant map.

    Optimized (Tree-shakable):

    import { countryUs, countryGb, languageAr, languageArSa } from '@blade-flags/core/flags/circle'

    Dynamic (Larger bundle): Use this when the flag code is unknown until runtime (e.g., from an API).

    import { circleFlags } from '@blade-flags/core/flags/circle'
import { resolveFlag } from '@blade-flags/core'

const countrySvg = resolveFlag(circleFlags, 'us')
const languageSvg = resolveFlag(circleFlags, 'ar-sa', 'language')

    Naming Convention: Flag names follow the pattern country{Code} and language{Code} in camelCase:

    • country-us $\rightarrow$ countryUs
    • country-gb-eng $\rightarrow$ countryGbEng
    • language-ar $\rightarrow$ languageAr
    • language-ar-sa $\rightarrow$ languageArSa
    import { countryUs, countryGb, languageAr, languageArSa } from '@blade-flags/core/flags/circle'

  3. Publish Raw SVG Icons for Laravel

    main

    To use flags as standard <img> tags, publish the raw SVG files to your public directory:

    php artisan vendor:publish --tag=blade-flags --force
php artisan vendor:publish --tag=blade-flags-circle --force
php artisan vendor:publish --tag=blade-flags-flat --force

    Then use them in your views:

    <img src="{{ asset('vendor/blade-flags/country-us.svg') }}" width="32" height="32"/>
    php artisan vendor:publish --tag=blade-flags --force
php artisan vendor:publish --tag=blade-flags-circle --force
php artisan vendor:publish --tag=blade-flags-flat --force

  4. Configure Language Flag Overrides in Laravel

    main

    By default, language flags use mappings from config/language-countries.json (e.g., en maps to UK). To override these (e.g., making en map to us):

    1. Publish the config file:
      php artisan vendor:publish --tag=blade-flags-config
    2. Edit config/blade-flags.php:
      'language_overrides' => [
    'ar' => ['default' => 'sa'],
    'en' => ['default' => 'us'],
],
    3. Publish assets and regenerate the SVGs:
      php artisan vendor:publish --tag=blade-flags --force
php artisan vendor:publish --tag=blade-flags-circle --force
php artisan vendor:publish --tag=blade-flags-flat --force
php artisan blade-flags:generate
    php artisan blade-flags:generate

  5. Install Blade Flags

    main

    Install the package based on your environment:

    Laravel / PHP

    composer require outhebox/blade-flags

    Vue

    npm install @blade-flags/core @blade-flags/vue

    React

    npm install @blade-flags/core @blade-flags/react

    Vanilla JS / Node

    npm install @blade-flags/core
    # Laravel / PHP
composer require outhebox/blade-flags

# Vue
npm install @blade-flags/core @blade-flags/vue

# React
npm install @blade-flags/core @blade-flags/react

# Vanilla JS / Node
npm install @blade-flags/core

  7. Use Blade Flags in Laravel Blade templates

    main

    Blade Flags provides self-closing Blade components that compile to SVG icons. There are three visual variants available:

    1. Default (Rounded Rectangle)

    Use <x-flag-country-{code} /> for countries or <x-flag-language-{code} /> for languages.

    <x-flag-country-us />
<x-flag-language-en />

    2. Circle

    Use <x-flag-circle-country-{code} /> or <x-flag-circle-language-{code} />.

    <x-flag-circle-country-gb />
<x-flag-circle-language-ar-sa />

    3. Flat (4:3 Rectangle)

    Use <x-flag-flat-country-{code} /> or <x-flag-flat-language-{code} />.

    <x-flag-flat-country-br />
<x-flag-flat-language-fr />

    Styling

    You can pass CSS classes directly to the components:

    <x-flag-country-us class="w-6 h-6"/>
    <x-flag-country-us />
<x-flag-circle-country-gb />
<x-flag-flat-country-br />

  10. Import specific flag variants for bundle optimization

    main

    To keep your application bundle size small, import only the specific flag variants you intend to use from @blade-flags/core/flags/ instead of importing a large default set.

    import { defaultFlags } from '@blade-flags/core/flags/default'
import { circleFlags } from '@blade-flags/core/flags/circle'
import { flatFlags } from '@blade-flags/core/flags/flat'

  12. Use the AutoFlag convenience component

    main

    The AutoFlag component is a convenience wrapper that bundles all variants. Instead of passing a flags map manually, you provide a variant string prop (e.g., 'circle', 'flat').

    import { AutoFlag } from '@blade-flags/react'

// Uses the 'circle' variant automatically
<AutoFlag code="us" variant="circle" />

// Uses the 'flat' variant for a language code
<AutoFlag code="ar" type="language" variant="flat" />