Flag is very large

[mohamedsabil83]

Can I change the size of the flag cause it's very large 750 widths and 500 height?

[Omranic]

Sure you can, it's SVG anyway so feel free to use it the way you want :)

[ludo237]

@mohamedsabil83 @Omranic how can I update the SVG size on demand?

[mohamedsabil83]

You can do it by setting the Height and Width attributes. You can paste your code for more help.

[ludo237]

@mohamedsabil83 I actually send the country class to a view using Blase template (from Laravel)

Something like this

<div>{{ $country->getFlag() }}</div>

[mohamedsabil83]

It's a workarownd. You can do it like this:

Blade

<div class="flag">{!! $country->getFlag() !!}</div>

Css

.flag svg {
    width: 100px;
    height: 50px;
}

[ludo237]

Damn I should have thought about that. Thank you very much

[mohamedsabil83]

Your welcome

[ludo237]

It does not work 😢

[shazahm1]

CSS should be used to size the flags, the SVG flag files do not need sized because, well, since they are vectors, they have no size (technically).

[mohamedsabil83]

@ludo237 codepen your code to review it .

[ludo237]

Never mind my fault, it works as intended!

Sorry

[mohamedsabil83]

Good to know that.

[ludo237]

Sorry to brings this up again but I figured out what was wrong, basically it's not me but some flags I am using the style provided by @mohamedsabil83 for this

I mean take a look at the screen shots here, this flag is rendered correctly: Inspect element of this flag is

While this clearly is not rendered correctly Inspect element of this flag is

Some flags have viewBox and title while other don't, the global style is this for what matters I'm using bootstrap 4 hence the @extend .mr-2

[ludo237]

I ended up leveraging a npm package called flag-icon-css then I simply do

And it works like a charm.

[mohamedsabil83]

Yes, It's another way. good to share it.