Компонент kbq-flag показывает флаг страны. Он не содержит изображений, а декорирует переданное содержимое: управляет формой и тенью, обеспечивает доступность. Поэтому флаг выглядит одинаково в продукте независимо от источника изображения.
Для работы с kbq-flag рекомендуется пакет country-flag-icons:
npm install country-flag-icons
Особенности пакета:
Это основной формат — используйте его в большинстве сценариев: инлайн с текстом, списки, селекты. Флаги с другим соотношением (например, 4:3) поддерживаются через переопределение CSS-переменной --kbq-flag-aspect-ratio.
Для квадратной формы берите изображения из директории 1x1/ пакета. Не обрезайте прямоугольный флаг самостоятельно — простое кадрирование по центру может убрать значимые элементы герба или флага. В пакете уже подготовлены версии 1:1 для каждой страны, а часть флагов — например, EU и KR — перерисована заново, чтобы не терять смысл при таком формате.
Используйте изображение с соотношением сторон 1:1.
Флагам добавляется тонкая внутренняя тень (inset-обводка) по краю. Без нее флаг сливается с фоном:
Поэтому цвет тени зависит от темы: в светлой теме тень темная, в темной — светлеет.
Флаг обозначает страну или регион, а не язык. Не используйте флаг для выбора языка интерфейса: один язык бывает в нескольких странах (испанский — не только Испания), а в одной стране бывает несколько языков.
Сначала проверьте наличие флага через hasFlag(code) и не показывайте пустоту:
import { hasFlag } from 'country-flag-icons';
hasFlag('RU'); // true
hasFlag('ZZ'); // false
Дальше — по ситуации.
Неизвестный или некорректный код. Показывайте нейтральную заглушку (серый прямоугольник, квадрат, круг или иконку глобуса). Пустота допустима, только если это не ломает верстку.
Нужен флаг не-страны (организация, историческая или спорная территория, субъект федерации). Пакет — сторонний продукт, ограниченный стандартом ISO 3166-1: такие флаги в него не попадают. Заведите их во внутреннем наборе проекта, чтобы способ использования kbq-flag не менялся.
Наднациональные флаги. Флаг ЕС доступен как отдельная версия 1:1; для остальных (ASEAN, ООН и т. п.) создавайте в проекте собственные изображения.
Это реальная страна, но флага нет. Случай маловероятный — стандарт ISO 3166-1 покрыт полностью, — но сначала обновите версию пакета. Если флаг устарел или отсутствует, заведите задачу или PR в репозитории пакета, а в своем проекте временно используйте собственное изображение.
Нужно отобразить флаг в большом размере. В пакете флаги перерисованы и упрощены для мелкого размера. Для показа в крупном размере используйте сторонний пакет с оригинальной детализацией — большинство таких источников её не упрощают.
Если флаг несет смысл (например, это единственный индикатор выбранной страны) — передавайте текстовую подпись:
<kbq-flag label="Германия"><img src="…/DE.svg" alt="" /></kbq-flag>
Если рядом уже есть текст (инлайн, опция, блок) — флаг декоративный, помечайте его decorative, чтобы он скрывался от экранных дикторов и не дублировал подпись.
<kbq-flag decorative><img src="…/DE.svg" alt="" /></kbq-flag>
Германия
Итого: у флага должна быть текстовая альтернатива — либо видимый текст рядом (тогда флаг decorative), либо подпись label для экранного диктора (когда видимого текста нет). Недопустим только третий случай — когда нет ни того, ни другого.
Компонент поддерживает стилизацию через CSS. Например, можно добавить скругление, тень и градиент, имитирующий складки.
Выбирайте размер флага так, чтобы его габариты были кратны пикселю — иначе границы изображения будут размытыми.