flag icons

ícones de bandeira

Uma coleção selecionada de todas as bandeiras de países em SVG — além do CSS para facilitar a integração. Veja a demonstração.

Instalar

Você pode baixar o projeto inteiro como está ou instalá-lo via npm ou Yarn:

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

Uso

Primeiro, você precisa importar o css:

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

ou use CDN:

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

Para usar os sinalizadores embutidos no texto, adicione as classes .fi e .fi-xx (onde xx é o código ISO 3166-1-alpha-2 de um país) a um <span> vazio. Se você deseja ter um sinalizador de versão quadrado, adicione a classe fis também. Exemplo:

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

Você também pode aplicar isso a qualquer elemento, mas nesse caso você terá que usar fib em vez de fi e pronto. Isso adicionará o plano de fundo correto com as seguintes propriedades CSS:

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

O que significa que a bandeira aparecerá apenas no meio de um elemento, então você terá que definir manualmente o tamanho correto da proporção 4 por 3 ou se for quadrado, adicione também a classe flag-icon-squared .

Desenvolvimento

Execute o yarn para instalar as dependências após clonar o projeto e você será capaz de:

Para construir arquivos *.scss

$ yarn build

Para servi-lo em localhost:8000

$ yarn start

Para ter apenas países específicos no arquivo css, remova aqueles que você não precisa do arquivo _flag-icons-list.scss e construa-o novamente.

Créditos

• Este projeto não existiria sem a incrível e agora excluída coleção de sinalizadores SVG da koppi.
• Obrigado Andrejs Abrickis por fornecer o nome flag-icons no npm.