react-square-flags

A set of React components for rendering square, minimalist international country and language flags, using square-flags as the SVG graphics. square-flags is itself originally derived from HatScripts’ circle-flags set, but with a number of tweaks and refinements to work better in a square-shaped canvas.

Usage

Each flag is exported as an individual React SVG component. These can be rendered directly, or passed as the flag prop to the SquareFlag component:

import { CountryFlagEU, SquareFlag } from 'react-square-flags';

export default () => {
  return <SquareFlag flag={CountryFlagEU} size="medium" />;
};

If you want to allow the caller to render an arbitrary named flag using a string instead, you can use the values from allCountryFlags to create a wrapper, like this:

import { allCountryFlags, CountryCode, SquareFlag } from 'react-square-flags';

export const AnyCountryFlag = ({
  code,
  ...props
}: Omit<ISquareFlagProps, 'flag'> & { code: CountryCode }) => {
  return <SquareFlag flag={allCountryFlags[code]} {...props} />;
};

Contributing

Development Dependencies

This project relies on a number of dependencies for local development which are not part of the published package, but which are used for:

• Importing the original SVG assets and converting them to JSX (Node)
• Building the published ESM JavaScript files (Rollup)
• Generating the associated type definitions (TypeScript)
• Visual screenshot testing (Storybook & Playwright)
• Unit testing (Jest & React Testing Library)

The goal is for all source code to be authored in TypeScript, and so they each require some discrete configuration to get them to work alongside one another.

• .nvmrc — this is used to specify the version of Node.js used, in our case v22.14, which supports running TypeScript source files natively so that the import script ingesting the SVG source files can reference the same types as the generated components
• babel.config.js — this is used by the build process when outputting JavaScript files, as part of the published package
• tsconfig.json — config for TypeScript used across the whole project for all TypeScript files, i.e. anything authored in TypeScript.
• tsconfig.build.json — config for TypeScript Compiler (tsc) when generating definition files only for the package
• jest.config.js — config used by Jest and React Testing Library
• playwright.config.js — config used by Playwright
• .storybook/main.ts — config for Storybook