flag icons

значки флагов

Тщательно подобранная коллекция флагов всех стран в формате SVG, а также CSS для упрощения интеграции. Посмотрите демо.

Установить

Вы можете скачать весь проект как есть или установить его через npm или Yarn:

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

Использование

Во-первых, вам нужно импортировать CSS:

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

или используйте CDN:

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

Для использования встроенных в текст флагов добавьте классы .fi и .fi-xx (где xx — код страны по стандарту ISO 3166-1-alpha-2) в пустой <span> . Если вы хотите иметь флаг версии в квадрате, добавьте также класс fis . Пример:

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

Вы также можете применить это к любому элементу, но в этом случае вам придется использовать fib вместо fi , и все готово. Это добавит правильный фон со следующими свойствами CSS:

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

Это означает, что флаг просто появится в середине элемента, поэтому вам придется вручную установить правильный размер 4 на 3 или, если он квадратный, добавить также класс flag-icon-squared .

Разработка

Запустите yarn для установки зависимостей после клонирования проекта, и вы сможете:

Для создания файлов *.scss

$ yarn build

Чтобы обслужить его на localhost:8000

$ yarn start

Чтобы в файле css были только определенные страны, удалите те, которые вам не нужны, из файла _flag-icons-list.scss и создайте его заново.

Кредиты

• Этот проект не существовал бы без потрясающей и теперь удаленной коллекции SVG-флагов от koppi.
• Спасибо, Андрей Абрикис, за предоставление названий flag-icons в npm.