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

UX - UI design de service

Toulouse Du 29 au 30 septembre

Voir la formation

Formations Front end

Développement d'applications JavaScript

Distanciel (foad) Du 10 au 12 octobre 2023

Voir la formation

Formations Django

Django intégration

A distance (foad) Le jeudi 3 novembre 2022

Voir la formation

Actualités en lien

Image
Design atelier
08/12/2022 - 11:00

Vous n’êtes pas l’utilisateur !

Pour créer une application avec une expérience utilisateur durable partez d'une "maxime" terrain : Vous n’êtes pas l’utilisateur ! C’est le constat de tout bon design centré sur l’utilisateur. En effet, nous ne pouvons pas nous baser seulement sur des ressentis, des présupposés et des biais culturels pour créer un produit ou un service durable.

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 - 11:57

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 - 11:00

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