Add flag component

[ghabriel25]

Adding flag components with the only property passed is size="lg", size="xl" (default size="base"). One of the component is like this

Total size: 619 KB

Example of England's flag

<flux:flag name="england" />
<flux:flag name="england" size="lg" />
<flux:flag name="england" size="xl" />

base	lg	xl

@blaze(fold: true)

@props([
    'size' => 'base'
])

@php
$classes = Flux::classes('shrink-0')
    ->add(match($size) {
        'xl' => '[:where(&)]:size-16',
        'lg' => '[:where(&)]:size-12',
        'base' => '[:where(&)]:size-8',
    });
@endphp

<svg {{ $attributes->class($classes) }} data-flux-flag xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" data-slot="flag">
    <rect x="1" y="4" width="30" height="24" rx="4" ry="4" fill="#fff"></rect>
    <path fill="#be2a2a" d="M31 14L18 14 18 4 14 4 14 14 1 14 1 18 14 18 14 28 18 28 18 18 31 18 31 14z"></path>
    <path d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z" opacity=".15"></path>
    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z" fill="#fff" opacity=".2"></path>
</svg>

Tested Locally

@calebporzio @joshhanley let me know if this is acceptable as I still working the remaining flags otherwise just close it. Thank you!

Note: still deciding if I should use country code instead name

[hebbet]

what is the source of the flags?

[ghabriel25]

@hebbet I'll add it later if its approved

[hebbet]

why not before?

[LukasCCB]

I have downloaded all files flags from https://nucleoapp.com/svg-flag-icons

[kyranb]

Looks great! 🙂

Personally I think using country code feels like a lot easier/safer way to guarantee the right flag etc is shown.

Different countries have their own spellings etc in different languages. Not to mention countries changing name, i.e Turkey becoming Türkiye.

Maybe there could be a prop for alt text, in case one does need to pass in a country name for that?

[ganyicz]

Hi @ghabriel25

Thanks for contributing. We're going to hold off on this for now. This is a rather large addition for something that some apps might never need. That said, if you strongly believe this should be part of Flux, upvote the discussion on this topic, which is currently sitting at only 2 upvotes: #1159. We're open to reconsider this if there's enough demand from community.

Until then, there are multiple Laravel packages that solve this already, some mentioned in the discussion.

[ghabriel25]

@ganyicz I can agree that its large addition for something thats not often to be used. However, I hope there is a chance make this opt-in like Lucide icon, maybe something like

php artisan flux:flag england

[ganyicz]

That's a good idea and definitely something that should be considered. Make sure to mention this in the discussion so we can reference that when we consider adding this in the future.

[ghabriel25]

Hi, @ganyicz

Just want to make sure. Should I create new PR or just use this branch?

[ganyicz]

@ghabriel25 there are no plans to add the component at this time. Please upvote the discussion if you haven't yet and feel free to drop your ideas in there. We will come back to it when there's more demand for this feature.

[LukasCCB]