@tabler/flags-preact

Country flags as Preact components — one tree-shakable component per flag (plus an ISO alias), and a dynamic lookup by slug or ISO code for data-driven lists.

Pre-1.0. API may still change.

Install

pnpm add @tabler/flags-preact preact

Usage

import { FlagPoland, FlagPL } from '@tabler/flags-preact';

function Language() {
  return <FlagPoland variant="plain" size={32} />; // FlagPL is the same component
}

Rendering by slug or ISO code

import { Flag, flagsList } from '@tabler/flags-preact';

function AllFlags() {
  return (
    <>
      {flagsList.map((slug) => (
        <Flag key={slug} name={slug} size={24} />
      ))}
      <Flag name="pl" />
    </>
  );
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | variant | 'rounded' \| 'plain' \| 'gradient' \| 'shiny' | 'rounded' | Which pre-baked visual variant to render. | | size | string \| number | 24 | Sets the SVG height. Width is derived from the fixed 5:4 aspect ratio, unless you also pass an explicit width. | | title | string | — | Adds an accessible <title> element inside the SVG. | | ...rest | JSX.SVGAttributes | — | Any other SVG attribute (class, onClick, style, ...) is forwarded to the root <svg>. |

The dynamic Flag component additionally requires name: a slug ("poland") or lowercase ISO 3166-1 alpha-2 code ("pl").

The full list of flags, slugs and component names is in the repository README.

License

tabler-flags is licensed under the MIT License.