Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-country-flags-country-flag-icons

Provider bond · country-flags · App (browser) · v1.0.1 · Apache-2.0

country-flag-icons flag set for molecule.dev

npm install @molecule/app-country-flags-country-flag-icons

npm · Source on GitHub · Implements @molecule/app-country-flags

How it works

@molecule/app-country-flags-country-flag-icons is a provider bond on the app (browser) side: it implements the country-flags core interface (@molecule/app-country-flags) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setCountryFlags } from '@molecule/app-country-flags'
import { countryFlags } from '@molecule/app-country-flags-country-flag-icons'

setCountryFlags(countryFlags) // once, at app startup

Works with: @molecule/app-country-flags

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

country-flag-icons flag set bond for molecule.dev.

Provides rectangular 3:2 SVG flags from the country-flag-icons library (MIT) as a CountryFlagSet for @molecule/app-country-flags. A curated subset (US, CN, EU today) rather than all ~250 flags, because every entry is inlined SVG that ships in the consuming bundle — extend src/flags.ts with one import + one entry per additional code.

Quick Start

import { setCountryFlags } from '@molecule/app-country-flags'
import { countryFlags } from '@molecule/app-country-flags-country-flag-icons'

setCountryFlags(countryFlags) // once, at app startup

Type

provider

Installation

npm install @molecule/app-country-flags-country-flag-icons @molecule/app-country-flags country-flag-icons

API

Constants

countryFlags

Rectangular 3:2 flags from country-flag-icons, keyed by UPPERCASE ISO 3166-1 alpha-2 code (plus the EU pseudo-code).

Deliberately a curated subset, not the library's full ~250 flags: each entry is inlined SVG markup that ships in every consuming bundle, and large emblem-heavy flags run to hundreds of KB. Add codes here (one import + one entry) as products need them.

const countryFlags: CountryFlagSet

Core Interface

Implements @molecule/app-country-flags interface.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-country-flags ^1.0.1

Runtime Dependencies

  • @molecule/app-country-flags

  • country-flag-icons

  • The SVG markup has viewBox-only sizing (no width/height attributes) — size it at render time via CountryFlagData.aspectRatio (always 1.5 here).

  • Swapping flag artwork (a different library, custom flags, 1:1 icons) means swapping this bond; consumers of getCountryFlag() are unaffected.