README

A small Contao 5 wrapper around lipis/flag-icons. It renders country flags as <img> tags via an insert tag or a Twig function.

Installation

composer require bohnmedia/contao-flag-icons-bundle

Usage

Insert tag

{{flag_icon::de}}

renders

<img src="data:image/svg+xml;utf8,…"
     alt="Germany"
     width="40"
     height="30"
     class="flag-icon flag-icon--de flag-icon--4x3">

More examples:

{{flag_icon::de::ratio=1x1}}
{{flag_icon::de::ratio=1x1::width=24}}
{{flag_icon::de::alt=Country name}}
{{flag_icon::de::alt=}}

Twig

{{ flag_icon('de') }}
{{ flag_icon('de', '1x1') }}
{{ flag_icon('de', '1x1', 24) }}
{{ flag_icon('de', alt='Country name') }}

The alt attribute is the localised country name from Contao's Countries service — German in a German page context, English in an English one, etc.

Parameters

If the country code is unknown (no matching SVG in the installed library), both the insert tag and the Twig function render as an empty string.

Styling

The bundle ships no CSS. Three BEM classes are emitted on every <img>:

• flag-icon — block-level hook for all flags
• flag-icon--{code} — country-specific modifier (e.g. flag-icon--de)
• flag-icon--{ratio} — ratio-specific modifier (e.g. flag-icon--1x1)

Use these to apply your own styles, for example:

.flag-icon { width: 1em; height: auto; vertical-align: -0.125em; }
.flag-icon--1x1 { border-radius: 50%; }

height: auto ensures the height re-derives from the intrinsic aspect ratio when you only set width in CSS.

License

MIT.