Makina Blog

Le blog Makina-corpus

Afficher n'importe quel drapeau du monde avec flag-icons


J'ai récemment eu besoin d'implémenter un sélecteur de langue avec des drapeaux dans une application web. J'avais envie de trouver une manière rapide de le faire sans avoir à intégrer tous les drapeaux un par un, et de la manière la plus légère possible.

J'ai trouvé la bibliothèque flag-icons qui permet d'afficher tous les drapeaux et les propose au format SVG, donc sans limite de taille.

Présentation

Nous retrouvons dans la bibliothèque flag-icons les drapeaux de tous les pays du monde, du plus simple au plus complexe :

Drapeaux

 Tous les drapeaux sont également disponibles en deux formats, 4x3 ou 1x1 :

Drapeaux carrés

Utilisation simple

Le plus simple pour tester est d'utiliser le CDN.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"
/>

Ensuite, il suffit d'ajouter un span avec les classes fi et fi-xx, xx étant le code alpha à deux caractères, que vous pouvez trouver sur iso.org.

<span class="fi fi-fr"></span>

Pour avoir un drapeau carré, il faut rajouter la classe fis.

<span class="fi fi-fr fis"></span>

Nous pouvons même intégrer un drapeau directement depuis le CDN, sans utiliser les classes CSS.

<img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/flags/4x3/fr.svg" alt="Français" />

Et c'est tout, vous pouvez maintenant ajouter autant de drapeaux que vous le souhaitez, dans la taille dont vous avez besoin. Cependant, nous pouvons faire encore mieux !

Utilisation avancée

Première chose, vous ne devez pas utiliser le CDN afin d'avoir les ressources localement et profiter du packaging possible avec webpack par exemple. Nous pouvons facilement installer flag-icons avec npm :

npm install flag-icons

Puis importer les styles, cette étape dépend de votre projet. Par exemple avec Sass :

@import '~flag-icons/sass/flag-icons.scss';

Sass apporte également un autre gros avantage : celui de pouvoir choisir quels drapeaux seront inclus dans le pack final et donc d'en réduire sa taille. Nous pouvons également définir le chemin des SVGs ou encore préciser si nous voulons avoir les drapeaux carrés ou non.

$flag-icons-path: '~flag-icons/flags';
$flag-icons-included-countries: 'gb', 'fr', 'de', 'es';
$flag-icons-use-square: false;
@import '~flag-icons/sass/flag-icons.scss';

Vous avez désormais toutes les clés en mains pour ajouter les drapeaux que vous voulez !

Formations associées

Formation UX-UI

Formation UX - UI design de service

Toulouse Du 28 au 29 mars 2024

Voir la formation

Formations Front end

Formation Développement d'applications JavaScript

À distance (FOAD) Du 1er au 5 avril 2024

Voir la formation

Formations Django

Formation Django intégration

À distance (FOAD) 22 janvier

Voir la formation

Actualités en lien

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
La Cène, par Léonard de Vinci, 1494-1498, fresque, Église Santa Maria delle Grazie de Milan.
13/07/2022

Méthodologies d’intégration du design dans le développement de projets 2/2

Découvrez le deuxième article de la série d'article pour découvrir une structure d'intégration du design et de la sémiotique dans le développement de projets.

Voir l'article
Image
Les tâches du design de services regroupées en catégories, Moritz
12/07/2022

Méthodologies d’intégration du design dans le développement de projets 1/2

Dans ce 1er article théorique et pratique de cette série, nous vous proposons de découvrir une structure d'intégration du design et de la sémiotique dans le développement de projets.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus