Flags are not working

[bezgemeo]

I tried to use this package and for some reason flags are not appearing neither on the button, nor in the list. However on the material-ui-phone-number they are.

On the screenshot there are both material-ui-phone-number and material-ui-phone-number-2. On the first one flags are working and on the second - no.
I have also installed dependency country-flag-icons, but don't get how to make it to de used by material-ui-phone-number-2.

[allaoua-rico]

same issue for me

[csongi-k]

Same issue for me to

[david-vendel]

I've looked into this. Library uses country-flag-icons package to get flags. Which seems to be working fine.
Also, Example Codesandbox renders flags without problems.

Are you using most recent version of this package? Alternatively I recommend downgrading the version as previously the flag icons were included in the build (see last paragraph).

This might be related to alexplumb#143

Also, @felipehertzer removed country flag icons from the build in most recent PR.

[csongi-k]

Yes. It is the latest version.

I did clone this repo and tried to run the demo. Flags where showing just fine there.
When I imported it into my project, the country flag svg was missing from the page source.

Downgrading is not an option for me since I want to use it with React 18. If I downgrade npm install throws peer dependency conflict error.

[sebalvarado]

Same issue for me, it only happens on mobile and safari

[felipehertzer]

For me it is working perfectly and also in Safari mobile. I'm using Vitejs, maybe it could be some configuration in Webpack Config. Can you check in the HTML for the flag.

it should be like this:

<div class="css-11pqm5d">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 242">
<path fill="#338AF3" d="M0 0h363v242H0z"></path><path fill="#FFF" d="M57 96.9 14.7 78.2 57 59.6l18.6-42.2 18.6 42.2 42.3 18.6-42.3 18.7-18.6 42.2z"></path><path fill="#f30028" d="m75.6 40.6 11.5 26.1 26.1 11.5-26.1 11.5-11.5 26.1-11.5-26.1L38 78.2l26.1-11.5z"></path><path d="M0 152.2h363v15.7H0zm0 31.4h363v15.7H0z" fill="#FFDA44"></path>
</svg>
</div>

[bezgemeo]

For me it is working perfectly and also in Safari mobile. I'm using Vitejs, maybe it could be some configuration in Webpack Config. Can you check in the HTML for the flag.

it should be like this:

<div class="css-11pqm5d">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 242">
<path fill="#338AF3" d="M0 0h363v242H0z"></path><path fill="#FFF" d="M57 96.9 14.7 78.2 57 59.6l18.6-42.2 18.6 42.2 42.3 18.6-42.3 18.7-18.6 42.2z"></path><path fill="#f30028" d="m75.6 40.6 11.5 26.1 26.1 11.5-26.1 11.5-11.5 26.1-11.5-26.1L38 78.2l26.1-11.5z"></path><path d="M0 152.2h363v15.7H0zm0 31.4h363v15.7H0z" fill="#FFDA44"></path>
</svg>
</div>

For me it was empty for both SVG and not SVG variants.

[csongi-k]

For me it is working perfectly and also in Safari mobile. I'm using Vitejs, maybe it could be some configuration in Webpack Config. Can you check in the HTML for the flag.

it should be like this:

<div class="css-11pqm5d">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 242">
<path fill="#338AF3" d="M0 0h363v242H0z"></path><path fill="#FFF" d="M57 96.9 14.7 78.2 57 59.6l18.6-42.2 18.6 42.2 42.3 18.6-42.3 18.7-18.6 42.2z"></path><path fill="#f30028" d="m75.6 40.6 11.5 26.1 26.1 11.5-26.1 11.5-11.5 26.1-11.5-26.1L38 78.2l26.1-11.5z"></path><path d="M0 152.2h363v15.7H0zm0 31.4h363v15.7H0z" fill="#FFDA44"></path>
</svg>
</div>

There is no SVG tag in our case. The issue is not specific to a browser or device. It is also happening on desktop Chrome, Edge.

[codewizard0803]

I have same error.
My react version is 18.
How to fix this error.