flag icons

iconos de bandera

Una colección seleccionada de todas las banderas de países en SVG, además de CSS para una integración más sencilla. Vea la demostración.

Instalar

Puedes descargar el proyecto completo tal cual o instalarlo mediante npm o Yarn:

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

Uso

Primero, necesitas importar CSS:

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

o usar CDN:

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

Para usar las banderas en línea con el texto, agregue las clases .fi y .fi-xx (donde xx es el código ISO 3166-1-alpha-2 de un país) a un <span> vacío. Si desea tener una bandera de versión cuadrada, agregue también la clase fis . Ejemplo:

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

También puedes aplicar esto a cualquier elemento, pero en ese caso tendrás que usar fib en lugar de fi y listo. Esto agregará el fondo correcto con las siguientes propiedades CSS:

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

Lo que significa que la bandera solo aparecerá en el medio de un elemento, por lo que tendrás que establecer manualmente el tamaño correcto de proporción de 4 por 3 o, si es cuadrado, agregar también la clase flag-icon-squared .

Desarrollo

Ejecute yarn para instalar las dependencias después de clonar el proyecto y podrá:

Para crear archivos *.scss

$ yarn build

Para servirlo en localhost:8000

$ yarn start

Para tener solo países específicos en el archivo css, elimine los que no necesita del archivo _flag-icons-list.scss y compílelo nuevamente.

Créditos

• Este proyecto no existiría sin la increíble y ahora eliminada colección de banderas SVG de koppi.
• Gracias Andrejs Abrickis por proporcionar el nombre de flag-icons en npm.