Бесплатные SVG-флаги стран: коллекция иконок флагов на CSS

Мне часто нужно делать селектор языка и селектор страны в своих проектах. Но поиск флагов — это всегда кошмар. Агент либо путает их, либо я трачу время на поиск нужного SVG.

К счастью, я нашёл коллекцию, которая работает отлично. Она содержит флаги всех стран в формате SVG и предоставляет CSS для их лёгкого внедрения. У этой коллекции больше 12 000 звёзд на гитхабе, и она охватывает все существующие страны.

Она описана как «подобранная коллекция флагов всех стран в SVG — плюс CSS для более простой интеграции». Это значит, что нужно подключить всего одну ссылку на CDN на своём сайте, и вы сможете показать любой флаг с помощью элемента span и двухбуквенного кода страны. Страница с демонстрацией всех флагов находится здесь: flagicons.lipis.dev.

1Как добавить флаги стран на свой сайт

Как только вы подключите эту ссылку на CDN в тег head своей веб-страницы, вам станут доступны все флаги из коллекции.

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

После этого вы можете показать любой флаг с помощью двух классов на теге span. Первый класс — fi, второй — fi- с двухбуквенным кодом страны по ISO. Для США это fi-us, для Германии — fi-de, для Японии — fi-jp и так далее. Поскольку флаги — это SVG-изображения, они хорошо масштабируются под любой размер.

<span class="fi fi-us"></span>  <!-- США -->
<span class="fi fi-de"></span>  <!-- Германия -->
<span class="fi fi-jp"></span>  <!-- Япония -->

Обычно я прошу агента добавить селектор языка в шапку веб-страницы. Затем использовать коллекцию flag-icons через CDN и показывать флаг каждой страны рядом с её названием. Например, у вас есть английский — флаг США, русский — флаг России и немецкий — флаг Германии. Агент уже знает коды стран и расставит всё правильно.

2Какие флаги есть в коллекции

Эта коллекция использует коды ISO 3166-1-alpha-2. Это международно признанное двухбуквенное обозначение стран, разработанное Организацией Объединённых Наций. Что касается дизайна, есть два варианта: традиционный прямоугольник 4х3 и квадратный флаг (с классом fis на span). Флаги — это SVG-изображения, поэтому они хорошо смотрятся при любом разрешении экрана.