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

В моих проектах переключатели языков и выборщики стран встречаются часто, и каждый раз поиск флагов оказывается более раздражающим, чем должен быть. Агент либо рисует флаги по памяти (и они выходят неточными), либо я трачу время на поиск отдельных SVG-файлов.

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

Авторы описывают её как «тщательно подобранная коллекция всех флагов стран в 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>  <!-- Япония -->

В моей практике я говорю агенту: «Добавь переключатель языков в шапку. Используй коллекцию флагов через CDN и покажи флаг каждой страны рядом с названием языка. Английский — с флагом США, русский — с российским флагом, немецкий — с немецким.» Агент знает коды стран и расставляет всё правильно.

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

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