react-svg-flag-kit

A React component to display country flags.

Installation

npm install react-svg-flag-kit

Usage

import { Flag } from 'react-svg-flag-kit';

function MyApp() {
  return (
    <div>
      <h1>India Flag</h1>
      <Flag cn="in" size={64} />
      
      <h1>USA Flag</h1>
      <Flag cn="us" />
    </div>
  );
}

Properties

| Property | Type | Default | Description | | --- | --- | --- | --- | | cn | string | - | Country code (ISO 3166-1 alpha-2) | | size | number | 24 | Width and height of the flag | | alt | string | ${cn} flag | Alt text for the flag image | | className | string | - | CSS class for the img element | | style | object | - | Inline styles for the img element |

Developer's Guide

This guide is intended for developers who wish to contribute to or modify this library.

Project Structure

• src/Flag.jsx: The core React component.
• src/index.js: Library entry point.
• src/flags/: Directory containing all SVG flag files (named by ISO 3166-1 alpha-2 code).
• rollup.config.mjs: Build configuration for generating CJS and ESM bundles.

Internal Architecture

The component uses Dynamic Imports to load flags lazily. This ensures that:

1. The initial bundle size remains small.
2. Only the flags actually used by the application are fetched from the server.
3. SVGs are treated as external assets and copied to the dist/flags folder during the build.

Development Workflow

Prerequisites

• Node.js >= 12.0.0
• npm

Installation

npm install

Building the Library

To generate the production-ready files in the dist directory:

npm run build

Adding or Updating Flags

1. Place the new or updated SVG file in src/flags/.
2. Ensure the filename is the lowercase ISO 3166-1 alpha-2 code (e.g., in.svg, us.svg).
3. Run npm run build to ensure the new assets are copied to the dist folder.

Publishing to npm

1. Update the version in package.json.
2. Ensure you are logged into npm (npm login).
3. Run the publish command (which will automatically trigger the build via prepublishOnly):

npm publish --access public