[Flag] - There are 2 hidden flags

[rubenprodev]

Steps to Reproduce

1. Go to https://semantic-ui.com/elements/flag.html
2. Go to Types and see the full flag list.
3. If you count, you get 245 flags.

Expected
We must have the same exact number of flags in the flags.png sprite, which is used for the component (https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/themes/default/assets/images/flags.png)

Result
Instead, we got 2 more. One of these are the Catalan (Catalonia), which you can see appearing under the Canadian flag (1st col, 36th row). I can't spot the last one.

[TheJltres]

You can get Catalan flag by adding

i.flag.es.ca:before, i.flag.catalonia:before { background-position: 0 -936px }

[rubenprodev]

It's what I already did but you get this output anyway:

I think they should improve it :/

[TheJltres]

Here you have an example: https://jsfiddle.net/TheJltres/9bxmc7rq/1/

[rubenprodev]

Yeah of course, the Flag component, internally uses the "i" html tag, which uses those classes, but if you change one of those flags with the names you say "es ca" or "catalonia", doesn't work. You can try it in there:

https://codesandbox.io/s/4t34j?module=/example.js&file=/example.js:160-166

[TheJltres]

https://codesandbox.io/s/semantic-ui-example-g5wwo

I imported App.css on index.js, and added a flag with the other one.

[TheJltres]

I did a PR in Fomantic-UI, the active fork of Semnatic-UI

fomantic/Fomantic-UI#1549

[rubenprodev]

Yeah thanks, I hope they fix it soon because as you can see in the codesandbox link you provided before, console output show us the warning.

[TheJltres]

Yes, the problem is with types of React-Semantic, now with Fomatic-UI v3 (https://github.com/fomantic/Fomantic-UI/blob/master/ROADMAP.md) will have React types also!

[rubenprodev]

Thank you, I've posted it in there.