[Emoji] Convert flags to country codes, both ways

[Nayte91]

Hello here,

I just heard about the new Emoji component by reading your last blog post for 7.1, and I have big plans for it.

I can't try it out currently, but I was wondering, by browsing it: is there a way to transliterate from/to flags (e. g. : 'flag: France') ⇄ Symfony\Component\Intl\Countries (getAlpha3Code(), getAlpha2Code(), getName(), ...) and Symfony\Component\Intl\Languages ones?

I guess I can go from a $emojiCode = 'flag: ' . Countries::getName($myAlpha2CodeFromMyEntity) to an emoji and the reverse, but am I sure that every country name will go for a flag and vice-versa?

Can we maybe add a method to achieve this? As I can see, intl doesn't require emoji, but emoji does require intl. So maybe we can create a small class to map flag emojis to countries/languages with some handy methods? I can totally do that, just want to be sure it's not already done (because oh boy, trust me, it's relevant. I'm struggling with country flags for years)!

[Nayte91]

As every systems does not have flags (e.g. Windows, with Edge) emojis, I wonder if we should create a Flags component with a config for fallback from emojis to whatever svg collection of every flag?

[smnandre]

function country2flag(string $countryCode): string
{
    return (string) preg_replace_callback(
        '/./',
        static fn (array $letter) => mb_chr(ord($letter[0]) % 32 + 0x1F1E5),
        $countryCode
    );
}

https://gist.github.com/IonBazan/b0d6165b2dfa1afc6329ea885e1feeb5

;)

[Nayte91]

I'll try at home, but I discovered that on Windows, and without Firefox (tried Edge, need to try with Chrome), country flags emojis are not displayed because Microsoft "doesn't want to be opiniated about countries".

TO EDIT AFTER CHECKS: So if it's only for edge, it's 5% of users, but if it's every browsers but firefox, it's about 30% (30% of marketshare for windows, where you have ~98% of non-Firefox use).

If your solutions works, we should implement something like this in a component ❤️
If it doesn't, we should propose a ultimate collection of svg flags, with a fallback mechanic when emojis exist.

[smnandre]

You also could leverage UX Icons (or any similar system outhere) to render SVG flags on the fly

For any country code (br to illustrate here)

<twig:ux:icon name="flag:br-4x3" />

<twig:ux:icon name="flag:br-1x1" />

would render

and

[Nayte91]

Ok, you're right, and I forgot that my base topic was a 1:1 converter country <---> flags. I wrote a bit too fast here.
Having an API from Symfony\Component\Intl\Countries or a new class Symfony\Component\Intl\Flags that allow to retrieve ux-icon-ified, emoji-fied flags based on various entries (country name, alpha code, ...)

[stof]

The rendering of a flag using ux-icon would belong to symfony/ux (or more likely a third-party package depending on it as I don't think it is worth adding it in the core, but the Symfony UX maintainers might not agree with me on whether they would want to maintain it themselves or no).

For the conversion of an ISO alpha2 code to its emoji flag, the only logic needed is the country2flag. But given that those flag emojis don't render as flags on Windows, I'm not sure we want to add a method in Symfony implementing (note that if you prefer adding a dependency than copying this small function, this logic has already been published as a Composer package)

[smnandre]

Ah i kinda missed the "no-emoji" constraint.. So you can use a CSS/SVG package (ex: https://github.com/flarik/css-sprite-flags but there are dozens of quality ones on github) that would allow you to display any country flag :)

@stof as i mentionned earlier there is already a few icon packs that provide icons for every country, so i don't think we will add a custom helper / component, i'm not sure it would bring something really better.. but if you have any idea/advice, i'm all ears !

[Nayte91]

You summed up the stakes pretty well, both of you;

• I wonder if it has to be in Intl component, as it may need dependency to emoji and ux-icons, that is not very relevant,
• I wonder if it has to be in icons component, as it may need dependancy to intl, not very relevant,
• I wonder if it has to be in emoji component, as it may need dependency to intl and icons.

I feel like it could be a new symfony ux component, ux-flags, a tiny one with:

• Dependencies to Intl, emojis icons and twig component,
• A "static" class (like Intl Languages or Countries) with few methods to give a country (or a language, maybe with the locales "fr_be" like? if not, no problem) and retrieve a flag,
• Setting up if retrieve only the emoji code, or the ux-icon flag code, or the whole html tag to render it,
• Setting up if flags comes from emojis, ux-icons, or local collection (own svgs in a folder), and if there is a fallback system from on to another,
• Allows to use it directly in twig with functions, or in other components that handle rendering, like Forms.

Is it a solid specification? Maybe with few impossible things, but it seems usefull, tiny and straightforward,

[stof]

@Nayte91 fetching a flag for an alpha2 country code will not require symfony/intl or symfony/emoji at all:

• for the emoji representation, the full logic is given above in an answer, without any dependency
• for the ux-icon representation, most icon sets providing flag icons are using the alpha2 code as their icon name (potentially with a fixed prefix like flag_ for some of them). You might want to create your own TwigComponent so that you can use <twig:Flag country="fr" />, making a wrapper for <twig:ux:icon name="flag:fr-4x3" />, but there is really no reason to include that component in symfony/ux itself.

if you have an alpha3 country code in your project, symfony/intl might be useful for you to convert it, but there is no reason to build this new component with an alpha3 input (and so no reason to introduce symfony/intl as a dependency for that). The sensible way is to take an alpha2 code as input.

And don't try implementing a component that provides a flag for a language at all, as this is broken by design (see #57208 (reply in thread) for the explanation).