flags-lib

Typed metadata for currencies and countries that links to flag assets. Drop this package into any TypeScript/JavaScript project to keep a single source of truth for currency names, symbols, ISO codes, and associated countries.

📉 Project Layout

• src/types.ts – shared TypeScript interfaces (CurrencyMeta, Country, etc.)
• src/data/currencies.ts – curated list of currencies with PNG flag pointers
• src/data/countries.ts – list of countries with SVG flag pointers
• assets/images/curr-flags/ – expected location for currency PNGs
• assets/images/country-flags/ – expected location for country SVGs

Only a sample of data is included for structure validation. You can replace or extend it with your own datasets or generate from JSON.

⚙️ Development

npm install
npm run build

npm run build compiles the TypeScript sources into dist/ and emits type declarations.

🚀 Usage

import {
  currencies,
  countries,
  getCurrencyByCode,
  getCountriesUsingCurrency,
} from "flags-lib";

const usd = getCurrencyByCode("USD");
const audCountries = getCountriesUsingCurrency("AUD");

Because flag image paths are relative, you can use them with any bundler or static setup (e.g. Vite, Angular, Webpack, etc.). If needed, override the asset paths in your own build system.

🎨 Using Flag Styles in UI

If you include the provided CSS files in your project, you can render flags via utility classes:

<span class="fl fl-xxx"></span> <span class="fl fl-xxx fls"></span>

• fl is the base styling class (sets dimensions and layout)
• fl-xxx is the lowercase ISO code (e.g. usd, eur, tr)
• fls is optional, and makes the flag icon square instead of rectangular

Example:

<span class="fl fl-usd"></span>

<span class="fl fl-gr"></span>
<!-- Greece country flag -->
<span class="fl fl-gr fls"></span>
<!-- Square Greece flag -->

Import the CSS files:

@import "/node-modules/flags-lib/css/currency-flag-libs.css";
@import "/node-modules/flags-lib/css/country-flag-libs.css";

✅ Make sure the assets in flags-lib/assets/ are available in your final app build. For Angular, configure "assets" in angular.json to copy these files into your app’s /assets directory.

🔧 Extending the Dataset

1. Add or replace entries in src/data/currencies.ts and src/data/countries.ts
2. Drop the corresponding SVG/PNG assets into assets/images
3. Run npm run build to emit the updated package

You can also automate this using your own JSON source and generate TypeScript output during build time.

📄 License

MIT — Ozge Topcu