flag icons

ikon bendera

Koleksi semua bendera negara dalam SVG — ditambah CSS untuk integrasi yang lebih mudah. Lihat demonya.

Memasang

Anda dapat mengunduh keseluruhan proyek apa adanya atau menginstalnya melalui npm atau Yarn:

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

Penggunaan

Pertama, Anda perlu mengimpor css:

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

atau gunakan CDN:

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

Untuk menggunakan bendera yang sejajar dengan teks, tambahkan kelas .fi dan .fi-xx (di mana xx adalah kode ISO 3166-1-alpha-2 suatu negara) ke <span> yang kosong. Jika Anda ingin memiliki tanda versi kuadrat, tambahkan juga kelas fis . Contoh:

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

Anda juga dapat menerapkan ini ke elemen apa pun, tetapi dalam hal ini Anda harus menggunakan fib bukan fi , dan Anda sudah siap. Ini akan menambahkan latar belakang yang benar dengan properti CSS berikut:

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

Artinya, bendera hanya akan muncul di tengah-tengah elemen, jadi Anda harus mengatur secara manual ukuran rasio 4 kali 3 yang benar atau jika berbentuk persegi, tambahkan juga kelas flag-icon-squared .

Perkembangan

Jalankan yarn untuk menginstal dependensi setelah mengkloning proyek dan Anda akan dapat:

Untuk membuat file *.scss

$ yarn build

Untuk menyajikannya di localhost:8000

$ yarn start

Untuk hanya memiliki negara tertentu di file css, hapus negara yang tidak Anda perlukan dari file _flag-icons-list.scss dan buat lagi.

Kredit

• Proyek ini tidak akan ada tanpa koleksi flag SVG yang mengagumkan dan sekarang telah dihapus oleh koppi.
• Terima kasih Andrejs Abrickis karena telah memberikan nama flag-icons di npm.