Some country flags are missing

[saaucorp]

Bug Report

Steps

Dropdown with flag

<Dropdown
      fluid
      options={[
        {
            text: "Antarctica",
            value: "aq",
            key: "aq",
            flag: "aq"
        },
        {
            text: "Guernsey",
            value: "gg",
            key: "gg",
            flag: "gg"
        },
        {
            text: "Isle of Man",
            value: "im",
            key: "im",
            flag: "im"
        },
        {
            text: "Jersey",
            value: "je",
            key: "je",
            flag: "je"
        },
      ]}  
/>

Expected Result

Should see the flag in dropdown.

Actual Result

Getting only text with blank flag, as flag is not register.

Version

0.77.2

Testcase

https://codesandbox.io/s/semantic-ui-react-jn1o7

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

This can't be solved on our side as we don't handle CSS 😿 And it's impossible to update existing set as it uses an outdated image sprite (https://github.com/fomantic/Fomantic-UI/issues/660).

However, Fomantic UI has plans to add SVG based flags (https://github.com/fomantic/Fomantic-UI/issues/1172) that scale well and contain actual codes (https://github.com/lipis/flag-icon-css/tree/master/flags/4x3).

I suggest to use temporary third-party library, I created a CodeSandbox example for you: https://codesandbox.io/s/additional-flags-in-semantic-ui-react-v1-330fe?file=/example.js