flag icons

icônes de drapeau

Une collection organisée de tous les drapeaux de pays en SVG — plus le CSS pour une intégration plus facile. Voir la démo.

Installer

Vous pouvez soit télécharger l'intégralité du projet tel quel, soit l'installer via npm ou Yarn :

npm install flag-icons
# or
yarn add flag-icons

Usage

Tout d'abord, vous devez importer du CSS :

 import "/node_modules/flag-icons/css/flag-icons.min.css" ;

ou utilisez CDN :

 < link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css "
/>

Pour utiliser les drapeaux en ligne avec le texte, ajoutez les classes .fi et .fi-xx (où xx est le code ISO 3166-1-alpha-2 d'un pays) à un <span> vide. Si vous souhaitez avoir un indicateur de version carrée, ajoutez également la classe fis . Exemple:

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

Vous pouvez également l'appliquer à n'importe quel élément, mais dans ce cas, vous devrez utiliser le fib au lieu de fi et vous êtes prêt. Cela ajoutera l'arrière-plan correct avec les propriétés CSS suivantes :

 background-size : contain;
background-position : 50 % ;
background-repeat : no-repeat;

Ce qui signifie que le drapeau va juste apparaître au milieu d'un élément, vous devrez donc définir manuellement la taille correcte du rapport 4 par 3 ou s'il est carré, ajouter également la classe flag-icon-squared .

Développement

Exécutez le yarn pour installer les dépendances après avoir cloné le projet et vous pourrez :

Pour créer des fichiers *.scss

$ yarn build

Pour le servir sur localhost:8000

$ yarn start

Pour n'avoir que des pays spécifiques dans le fichier CSS, supprimez ceux dont vous n'avez pas besoin du fichier _flag-icons-list.scss et reconstruisez-le.

Crédits

• Ce projet n'existerait pas sans l'impressionnante collection de drapeaux SVG de koppi, désormais supprimée.
• Merci Andrejs Abrickis d'avoir fourni le nom flag-icons sur npm.