flag icons

Flaggensymbole

Eine kuratierte Sammlung aller Länderflaggen in SVG – plus CSS für eine einfachere Integration. Sehen Sie sich die Demo an.

Installieren

Sie können entweder das gesamte Projekt unverändert herunterladen oder über npm oder Yarn installieren:

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

Verwendung

Zuerst müssen Sie CSS importieren:

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

oder CDN verwenden:

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

Um die Flags inline mit Text zu verwenden, fügen Sie die Klassen .fi und .fi-xx (wobei xx der ISO 3166-1-alpha-2-Code eines Landes ist) zu einem leeren <span> hinzu. Wenn Sie ein quadratisches Versionsflag haben möchten, fügen Sie auch die Klasse fis hinzu. Beispiel:

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

Sie könnten dies auch auf jedes beliebige Element anwenden, aber in diesem Fall müssen Sie fib anstelle von fi verwenden und schon sind Sie fertig. Dadurch wird der richtige Hintergrund mit den folgenden CSS-Eigenschaften hinzugefügt:

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

Das bedeutet, dass die Flagge nur in der Mitte eines Elements angezeigt wird. Sie müssen also manuell die korrekte Größe des Verhältnisses 4 x 3 festlegen oder, wenn sie quadratisch ist, auch die Klasse flag-icon-squared hinzufügen.

Entwicklung

Führen Sie das yarn aus, um die Abhängigkeiten nach dem Klonen des Projekts zu installieren, und Sie können Folgendes tun:

So erstellen Sie *.scss Dateien

$ yarn build

Um es auf localhost:8000 bereitzustellen

$ yarn start

Um nur bestimmte Länder in der CSS-Datei zu haben, entfernen Sie diejenigen, die Sie nicht benötigen, aus der Datei _flag-icons-list.scss und erstellen Sie sie erneut.

Credits

• Dieses Projekt würde ohne die tolle und jetzt gelöschte Sammlung von SVG-Flaggen von Koppi nicht existieren.
• Vielen Dank, Andrejs Abrickis, für die Bereitstellung des flag-icons Namens auf npm.