### Install Vite Bundle Analyzer

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Install the Vite Bundle Analyzer plugin for bundle size analysis.

```bash
npm install --save-dev rollup-plugin-visualizer
```

--------------------------------

### Install Solid.js Circle Flags with bun

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Solid.js specific package using bun.

```bash
bun add @sankyu/solid-circle-flags
```

--------------------------------

### Install Solid.js Circle Flags with npm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Solid.js specific package using npm.

```bash
npm install @sankyu/solid-circle-flags
```

--------------------------------

### Install Webpack Bundle Analyzer

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Install the Webpack Bundle Analyzer tool to analyze your bundle size.

```bash
npm install --save-dev webpack-bundle-analyzer
```

--------------------------------

### Install Solid.js Circle Flags with yarn

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Solid.js specific package using yarn.

```bash
yarn add @sankyu/solid-circle-flags
```

--------------------------------

### Install Solid.js Circle Flags with pnpm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Solid.js specific package using pnpm.

```bash
pnpm add @sankyu/solid-circle-flags
```

--------------------------------

### Install Next.js Bundle Analyzer

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Install the Next.js Bundle Analyzer to analyze your application's bundle size.

```bash
npm install --save-dev @next/bundle-analyzer
```

--------------------------------

### Install @sankyu/react-circle-flags with npm

Source: https://react-circle-flags.js.org/_llms-txt/migration-guide.txt

Use this command to uninstall the old library and install the new one using npm.

```bash
npm uninstall react-circle-flags
npm install @sankyu/react-circle-flags
```

--------------------------------

### Install @sankyu/react-circle-flags with pnpm

Source: https://react-circle-flags.js.org/_llms-txt/migration-guide.txt

Use this command to uninstall the old library and install the new one using pnpm.

```bash
pnpm remove react-circle-flags
pnpm add @sankyu/react-circle-flags
```

--------------------------------

### Install React Circle Flags with bun

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the main react-circle-flags package using bun.

```bash
bun add @sankyu/react-circle-flags
```

--------------------------------

### Vue 3 Flag Styling Examples

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Demonstrates styling flags in Vue 3 using class bindings, inline styles, and scoped CSS. Ensure the '@sankyu/vue-circle-flags' package is installed.

```vue
<script setup lang="ts">
import { FlagUs } from '@sankyu/vue-circle-flags'
</script>

<template>
  <!-- Using class -->
  <FlagUs class="w-12 h-12 rounded-full shadow-lg hover:scale-110 transition-transform" />
  <!-- Using inline styles -->
  <FlagUs :style="{ width: '48px', height: '48px', borderRadius: '50%' }" />
  <!-- With scoped styles -->
  <FlagUs class="flag" />
</template>

<style scoped>
.flag {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.flag:hover {
  transform: scale(1.1);
}
</style>
```

--------------------------------

### Install React Circle Flags with yarn

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the main react-circle-flags package using yarn.

```bash
yarn add @sankyu/react-circle-flags
```

--------------------------------

### Install @sankyu/react-circle-flags with yarn

Source: https://react-circle-flags.js.org/_llms-txt/migration-guide.txt

Use this command to uninstall the old library and install the new one using yarn.

```bash
yarn remove react-circle-flags
yarn add @sankyu/react-circle-flags
```

--------------------------------

### Install React Circle Flags with npm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the main react-circle-flags package using npm.

```bash
npm install @sankyu/react-circle-flags
```

--------------------------------

### Install React Circle Flags with pnpm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the main react-circle-flags package using pnpm.

```bash
pnpm add @sankyu/react-circle-flags
```

--------------------------------

### Install Vue 3 Circle Flags with bun

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Vue 3 specific package using bun.

```bash
bun add @sankyu/vue-circle-flags
```

--------------------------------

### Quick Start with CDN and HTML

Source: https://react-circle-flags.js.org/llms-full.txt

Demonstrates how to set up an HTML file to load React, ReactDOM, and react-circle-flags from esm.sh using import maps and render a US flag.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19",
          "react-dom/client": "https://esm.sh/react-dom@19/client",
          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>


    <script type="module">
      import { createRoot } from 'react-dom/client'
      import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'


      function App() {
        return <FlagUs width={64} height={64} title="US" />
      }


      createRoot(document.getElementById('root')).render(<App />)
    </script>
  </body>
</html>
```

--------------------------------

### Quick Start with CDN

Source: https://react-circle-flags.js.org/llms-small.txt

Demonstrates how to set up an HTML file to use react-circle-flags from a CDN, including necessary import maps for React and the flag library.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react@19",
        "react-dom/client": "https://esm.sh/react-dom@19/client",
        "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
      }
    }
  </script>
</head>
<body>
  <div id="root"></div>
  <script type="module">
    import { createRoot } from 'react-dom/client'
    import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'

    function App() {
      return <FlagUs width={64} height={64} title="US" />
    }

    createRoot(document.getElementById('root')).render(<App />)
  </script>
</body>
</html>
```

--------------------------------

### Install Vue 3 Circle Flags with yarn

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Vue 3 specific package using yarn.

```bash
yarn add @sankyu/vue-circle-flags
```

--------------------------------

### Install Vue 3 Circle Flags with npm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Vue 3 specific package using npm.

```bash
npm install @sankyu/vue-circle-flags
```

--------------------------------

### Install Vue 3 Circle Flags with pnpm

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use this command to install the Vue 3 specific package using pnpm.

```bash
pnpm add @sankyu/vue-circle-flags
```

--------------------------------

### Solid.js Advanced Typing Examples

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Provides advanced typing examples for Solid.js, including defining props for specific flag components and creating reusable wrapper components with type safety.

```tsx
import type { Component } from 'solid-js'
import { FlagCn, FlagUs } from '@sankyu/solid-circle-flags'

type FlagCnProps = Parameters<typeof FlagCn>[0]
type SvgFlagProps = Parameters<typeof FlagUs>[0]
type SvgFlagComponent = Component<SvgFlagProps>

export function Flag(props: FlagCnProps) {
  return <FlagCn {...props} />
}

export function FlagWithLabel(
  props: {
    FlagComponent?: SvgFlagComponent
    label?: string
  } & SvgFlagProps
) {
  const { FlagComponent = FlagUs, label, ...svgProps } = props
  return (
    <div>
      <FlagComponent {...svgProps} />
      {label && <span>{label}</span>}
    </div>
  )
}
```

--------------------------------

### Quick Start with ESM CDN

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Demonstrates how to load react-circle-flags from an ESM CDN in a basic HTML file for quick prototyping. Ensure you trust the CDN provider and pin versions for production.

```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <script type="importmap">
 {
 "imports": {
 "react": "https://esm.sh/react@19",
 "react-dom/client": "https://esm.sh/react-dom@19/client",
 "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
 }
 }
 </script>
</head>
<body>
 <div id="root"></div>
 <script type="module">
 import { createRoot } from 'react-dom/client'
 import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'

 function App() {
 return <FlagUs width={64} height={64} title="US" />
 }

 createRoot(document.getElementById('root')).render(<App />)
 </script>
</body>
</html>
```

--------------------------------

### isFlagCode Type Guard Example

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Shows how to use the `isFlagCode` type guard to validate flag codes.

```ts
isFlagCode('us') // true
isFlagCode('US') // false (expects normalized lowercase input)
isFlagCode('invalid') // false
```

--------------------------------

### Size Utilities

Source: https://react-circle-flags.js.org/llms-small.txt

Utilities for getting predefined size names from pixel values and accessing size constants.

```APIDOC
## `getSizeName(pixels: number): FlagSizeName | null`

### Description
Get the predefined size name from pixel value.

### Method
`FlagUtils.getSizeName`

### Parameters
#### Path Parameters
- **pixels** (number) - Required - The size in pixels.

### Request Example
```ts
FlagUtils.getSizeName(16)
FlagUtils.getSizeName(32)
FlagUtils.getSizeName(100)
```

### Response
#### Success Response (FlagSizeName | null)
- Returns the predefined size name (e.g., 'xs', 'sm', 'md') or `null` if no matching size is found.

### Response Example
```json
"xs"
"md"
null
```

## `sizes: Record<FlagSizeName, number>`

### Description
Predefined size constants mapping size names to pixel values.

### Method
`FlagUtils.sizes`

### Response
#### Success Response (Record<FlagSizeName, number>)
- An object containing predefined flag sizes.

### Response Example
```json
{
  "xs": 16,
  "sm": 24,
  "md": 32,
  "lg": 48,
  "xl": 64,
  "xxl": 96,
  "xxxl": 128
}
```
```

--------------------------------

### FlagCode Type Usage Example

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Demonstrates valid and invalid assignments to the FlagCode type in TypeScript.

```ts
// ✅ Valid - TypeScript will autocomplete all 400+ codes
const code: FlagCode = 'us'
// ❌ Error - Type '"invalid"' is not assignable to type 'FlagCode'
const invalid: FlagCode = 'invalid'
```

--------------------------------

### SolidStart Flag Usage

Source: https://react-circle-flags.js.org/llms-full.txt

Example of integrating FlagUs and FlagCn components in a SolidStart application. Note the import path '@sankyu/solid-circle-flags' and the use of 'class' for styling.

```tsx
import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags' 


export default function Home() {
  return (
    <main>
      <h1>Country Flags</h1>
      <div class="flex gap-4">
        <FlagUs width={64} height={64} className="rounded-full" />
        <FlagCn width={64} height={64} className="rounded-full" />
      </div>
    </main>
  )
}
```

--------------------------------

### Version Pinning for CDN Imports

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Highlights the importance of pinning specific versions when using CDNs to prevent unexpected breaking changes. This example shows the difference between a version-agnostic and a version-pinned import.

```diff
import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags?exports=FlagUs'
import { FlagUs } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagUs'
```

--------------------------------

### Solid.js Flag Code Utilities

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Shows how to utilize flag code utility functions in a Solid.js application. Includes examples for component name retrieval and country code formatting.

```typescript
import { FlagUtils } from '@sankyu/solid-circle-flags'

FlagUtils.getComponentName('us') // 'FlagUs'
FlagUtils.formatCountryCode('us') // 'US'
```

--------------------------------

### Vue 3 Flag Usage

Source: https://react-circle-flags.js.org/llms-small.txt

Example of implementing country flags in a Vue 3 application. Demonstrates binding width and height attributes.

```vue
<script setup lang="ts">
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
</script>

<template>
  <div>
    <h1>Country Flags</h1>
    <div class="flex gap-4">
      <FlagUs :width="48" :height="48" />
      <FlagCn :width="48" :height="48" />
    </div>
  </div>
</template>
```

--------------------------------

### Vue 3 Flag Usage

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Basic example of rendering US and CN flags in a Vue 3 application. Shows how to set flag dimensions.

```vue
<script setup lang="ts">
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
</script>
<template>
<div>
<h1>Country Flags</h1>
<div class="flex gap-4">
<FlagUs :width="48" :height="48" />
<FlagCn :width="48" :height="48" />
</div>
</div>
</template>
```

--------------------------------

### coerceFlagCode Function Examples

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Demonstrates the `coerceFlagCode` function for safely converting strings to flag codes, including fallback behavior.

```ts
coerceFlagCode('US') // 'us'
coerceFlagCode('Us') // 'us'
coerceFlagCode('invalid') // 'xx' (default fallback)
coerceFlagCode('invalid', 'un') // 'un' (custom fallback)
coerceFlagCode('GB-ENG') // 'gb-eng'
```

--------------------------------

### Type Narrowing with isFlagCode (React Example)

Source: https://react-circle-flags.js.org/llms-small.txt

Demonstrates how to use the `isFlagCode` type guard within a React component to validate and narrow down the type of a string to `FlagCode`, enabling safe usage of flag components.

```APIDOC
### Type narrowing with `isFlagCode`
* React
```tsx
import { isFlagCode } from '@sankyu/react-circle-flags'
import { DynamicFlag } from '@sankyu/react-circle-flags'

export function CountryFlag({ code }: { code: string }) {
  // Validate and normalize first
  const normalized = code.trim().toLowerCase()

  if (isFlagCode(normalized)) {
    // TypeScript knows `normalized` is FlagCode here
    return <DynamicFlag code={normalized} strict width={32} height={32} />
  }

  // Fallback for invalid codes
  return <span className="text-red-500">{code.toUpperCase()} (invalid)</span>
}
```
```

--------------------------------

### Vue 3: Named Imports + Map for Dynamic Flags

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

This Vue 3 example demonstrates using named imports and a map to render flags dynamically, suitable for offline-first applications with a known set of country codes.

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { FlagCn, FlagGb, FlagUs } from '@sankyu/vue-circle-flags'
const props = defineProps<{ code: string }>()
const FLAGS = {
  cn: FlagCn,
  gb: FlagGb,
  us: FlagUs,
} as const
const FlagComp = computed(() => {
  const normalized = props.code.toLowerCase()
  return FLAGS[normalized as keyof typeof FLAGS] ?? null
})
</script>

<template>
  <component v-if="FlagComp" :is="FlagComp" :width="36" :height="36" />
  <span v-else :title="'Unknown country code'">{{ props.code.toUpperCase() }}</span>
</template>
```

--------------------------------

### Vite (Solid) Flag Usage

Source: https://react-circle-flags.js.org/llms-small.txt

Example of integrating circle flags within a Vite project using Solid. Applies a rounded-full class for styling.

```tsx
import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags'
export default function App() {
  return (
    <main>
      <h1>Country Flags</h1>
      <div class="flex gap-4">
        <FlagUs width={56} height={56} className="rounded-full" />
        <FlagCn width={56} height={56} className="rounded-full" />
      </div>
    </main>
  )
}
```

--------------------------------

### Solid.js Advanced Typing and Reusable Wrapper

Source: https://react-circle-flags.js.org/llms-full.txt

Utilize TypeScript in Solid.js for advanced typing of flag components and creating reusable wrappers. This example shows inferring props and creating a generic `FlagWithLabel` component.

```tsx
import type { Component } from 'solid-js'
import { FlagCn, FlagUs } from '@sankyu/solid-circle-flags'


type FlagCnProps = Parameters<typeof FlagCn>[0]
type SvgFlagProps = Parameters<typeof FlagUs>[0]
type SvgFlagComponent = Component<SvgFlagProps>


export function Flag(props: FlagCnProps) {
  return <FlagCn {...props} />
}


export function FlagWithLabel(
  props: { FlagComponent?: SvgFlagComponent; label?: string } & SvgFlagProps
) {
  const { FlagComponent = FlagUs, label, ...svgProps } = props
  return (
    <div>
      <FlagComponent {...svgProps} />
      {label && <span>{label}</span>}
    </div>
  )
}
```

--------------------------------

### Nuxt.js Flag Usage

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Demonstrates importing and using US and CN flags within a Nuxt.js Vue project. Uses Vue 3 syntax with script setup.

```vue
<script setup lang="ts">
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
</script>
<template>
<main>
<h1>Country Flags</h1>
<div class="flex gap-4">
<FlagUs :width="64" :height="64" />
<FlagCn :width="64" :height="64" />
</div>
</main>
</template>
```

--------------------------------

### Solid.js Dynamic Flag Rendering

Source: https://react-circle-flags.js.org/llms-full.txt

Implement dynamic flag rendering in Solid.js for a predefined set of country codes. This example maps ISO codes to imported flag components, providing a fallback for any unknown codes.

```tsx
import { FlagCn, FlagGb, FlagUs } from '@sankyu/solid-circle-flags'


const FLAGS = {
  cn: FlagCn,
  gb: FlagGb,
  us: FlagUs,
} as const


export function CountryFlag(props: { code: string }) {
  const normalized = props.code.toLowerCase()
  const Flag = FLAGS[normalized as keyof typeof FLAGS]


  if (!Flag) return <span title="Unknown country code">{props.code.toUpperCase()}</span>
  return <Flag width={36} height={36} />
}
```

--------------------------------

### React: Named Imports for Static Flags

Source: https://react-circle-flags.js.org/llms-small.txt

Use named imports when flags are known at build time for optimal bundle size and no network requests. This example shows how to import and render specific country flags.

```tsx
import { FlagCn, FlagGb, FlagUs } from '@sankyu/react-circle-flags'

export function Header() {
  return (
    <div>
      <FlagUs width={32} height={32} />
      <FlagCn width={32} height={32} />
      <FlagGb width={32} height={32} />
    </div>
  )
}
```

--------------------------------

### Vue 3: DynamicFlag for Any Runtime Code

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

This Vue 3 example uses DynamicFlag to render any runtime country code. It's suitable for synchronous rendering but includes all flag SVGs, impacting the overall bundle size.

```vue
<script setup lang="ts">
import { DynamicFlag } from '@sankyu/vue-circle-flags'
const props = defineProps<{ code: string }>()
</script>

<template>
  <DynamicFlag :code="props.code" :width="36" :height="36" />
</template>
```

--------------------------------

### FlagUtils getComponentName Method

Source: https://react-circle-flags.js.org/_llms-txt/api-reference.txt

Method to get the component name for a given country code.

```typescript
getComponentName: (code) => string;
```

--------------------------------

### Handling Runtime Country Codes with CDN

Source: https://react-circle-flags.js.org/llms-full.txt

Illustrates how to map runtime country codes to specific flag components imported from a CDN, providing a fallback for unknown codes.

```js
import {
  FlagCn,
  FlagGb,
  FlagUs,
} from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagGb,FlagUs'


const FLAGS = { cn: FlagCn, gb: FlagGb, us: FlagUs }


export function CountryFlag({ code }) {
  const normalized = String(code).toLowerCase()
  const Flag = FLAGS[normalized]
  return Flag ? <Flag width={36} height={36} /> : <span>{String(code).toUpperCase()}</span>
}
```

--------------------------------

### Handle Runtime Country Codes with CDN

Source: https://react-circle-flags.js.org/llms-small.txt

Illustrates how to dynamically render flags based on runtime country codes by mapping them to imported flag components. Includes a fallback for unknown codes.

```js
import { FlagCn, FlagGb, FlagUs, } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagGb,FlagUs'

const FLAGS = {
  cn: FlagCn,
  gb: FlagGb,
  us: FlagUs
}

export function CountryFlag({ code }) {
  const normalized = String(code).toLowerCase()
  const Flag = FLAGS[normalized]
  return Flag ? <Flag width={36} height={36} /> : <span>{String(code).toUpperCase()}</span>
}
```

--------------------------------

### FlagUtils getSizeName Method

Source: https://react-circle-flags.js.org/_llms-txt/api-reference.txt

Method to get the size name (e.g., 'sm', 'md') from a pixel value.

```typescript
getSizeName: (pixels) => FlagSizeName | null;
```

--------------------------------

### Flag Code Utilities

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Provides functions for validating, formatting, and getting component names for country codes.

```APIDOC
## `isValidCountryCode(code: string): boolean`

### Description
Check if a string is a valid country/subdivision code.

### Parameters
#### Path Parameters
- **code** (string) - Required - The country code to validate.

### Response
#### Success Response
- **boolean**: Returns `true` if the code is valid, `false` otherwise.

### Example
```ts
FlagUtils.isValidCountryCode('us') // true
FlagUtils.isValidCountryCode('US') // true (case-insensitive)
FlagUtils.isValidCountryCode('invalid') // false
```
```

```APIDOC
## `formatCountryCode(code: string): string`

### Description
Normalize a country code to uppercase display format.

### Parameters
#### Path Parameters
- **code** (string) - Required - The country code to format.

### Response
#### Success Response
- **string**: The formatted country code in uppercase.

### Example
```ts
FlagUtils.formatCountryCode('us') // 'US'
FlagUtils.formatCountryCode('Us') // 'US'
FlagUtils.formatCountryCode('invalid') // 'INVALID' (no validation)
```
```

```APIDOC
## `getComponentName(code: string): string`

### Description
Get the component name for a flag code (e.g., `FlagUs`).

### Parameters
#### Path Parameters
- **code** (string) - Required - The country code to get the component name for.

### Response
#### Success Response
- **string**: The component name for the flag.

### Example
```ts
FlagUtils.getComponentName('us') // 'FlagUs'
FlagUtils.getComponentName('gb-eng') // 'FlagGbEng'
```
```

--------------------------------

### Vite (React) Flag Usage

Source: https://react-circle-flags.js.org/llms-small.txt

Example of using react-circle-flags in a Vite project with React. Customize flag sizes.

```tsx
import { FlagUs, FlagCn } from '@sankyu/react-circle-flags'
function App() {
  return (
    <>
      <h1>Country Flags</h1>
      <div className="flex gap-4">
        <FlagUs width={56} height={56} />
        <FlagCn width={56} height={56} />
      </div>
    </>
  )
}
export default App
```

--------------------------------

### BuildMeta version Property

Source: https://react-circle-flags.js.org/llms-full.txt

Indicates the version of the build. This is a string value.

```typescript
version: string;
```

--------------------------------

### Next.js Flag Usage

Source: https://react-circle-flags.js.org/llms-full.txt

Example of using FlagUs and FlagCn components in a Next.js page. Ensure the components are imported from '@sankyu/react-circle-flags'.

```tsx
import { FlagUs, FlagCn } from '@sankyu/react-circle-flags' 


export default function Page() {
  return (
    <main>
      <h1>Country Flags</h1>
      <div className="flex gap-4">
        <FlagUs width={64} height={64} />
        <FlagCn width={64} height={64} />
      </div>
    </main>
  )
}
```

--------------------------------

### Handling Runtime Country Codes with CDN

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Illustrates how to map runtime country codes to specific flag components imported from an ESM CDN, providing a fallback for unknown codes. This approach helps keep the application offline-first.

```javascript
import { FlagCn, FlagGb, FlagUs, } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagGb,FlagUs'

const FLAGS = {
 cn: FlagCn,
 gb: FlagGb,
 us: FlagUs
}

export function CountryFlag({ code }) {
 const normalized = String(code).toLowerCase()
 const Flag = FLAGS[normalized]

 return Flag ? <Flag width={36} height={36} /> : <span>{String(code).toUpperCase()}</span>
}
```

--------------------------------

### Get Component Name for Flag

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Use getComponentName to derive the component name (e.g., 'FlagUs') from a given flag code.

```typescript
FlagUtils.getComponentName('us') // 'FlagUs'
FlagUtils.getComponentName('gb-eng') // 'FlagGbEng'
```

--------------------------------

### Nuxt.js Flag Usage

Source: https://react-circle-flags.js.org/llms-full.txt

Example of using FlagUs and FlagCn components in a Nuxt.js application. Components are imported from '@sankyu/vue-circle-flags'. Uses ':' for binding props.

```vue
<script setup lang="ts">
import { FlagUs, FlagCn } from '@sankyu/vue-circle-flags'
</script>


<template>
  <main>
    <h1>Country Flags</h1>
    <div class="flex gap-4">
      <FlagUs :width="64" :height="64" />
      <FlagCn :width="64" :height="64" />
    </div>
  </main>
</template>
```

--------------------------------

### Import Type Utilities for Solid.js

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Import necessary type utilities and the FlagCode type for Solid.js applications.

```tsx
import { coerceFlagCode, isFlagCode } from '@sankyu/solid-circle-flags'
import { type FlagCode } from '@sankyu/solid-circle-flags'
```

--------------------------------

### DynamicFlag Component in Vue 3

Source: https://react-circle-flags.js.org/llms-full.txt

This Vue 3 example demonstrates using DynamicFlag for offline flag rendering, bundling all available flags.

```vue
<script setup lang="ts">
import { DynamicFlag } from '@sankyu/vue-circle-flags'
const props = defineProps<{ code: string }>()
</script>


<template>
  <DynamicFlag :code="props.code" :width="36" :height="36" />
</template>
```

--------------------------------

### Importing Specific Flags from ESM CDN

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Shows how to import only the necessary flag components from an ESM CDN using the `exports` query parameter to reduce bundle size.

```javascript
import { FlagCn, FlagUs, } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagUs'
```

--------------------------------

### Size Utilities

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Provides functions and constants for managing flag sizes.

```APIDOC
## `getSizeName(pixels: number): FlagSizeName | null`

### Description
Get the predefined size name from pixel value.

### Parameters
#### Path Parameters
- **pixels** (number) - Required - The size in pixels.

### Response
#### Success Response
- **FlagSizeName | null**: The predefined size name (e.g., 'xs', 'sm') or null if the pixel value does not match a predefined size.

### Example
```ts
FlagUtils.getSizeName(16) // 'xs'
FlagUtils.getSizeName(24) // 'sm'
FlagUtils.getSizeName(32) // 'md'
FlagUtils.getSizeName(48) // 'lg'
FlagUtils.getSizeName(64) // 'xl'
FlagUtils.getSizeName(96) // 'xxl'
FlagUtils.getSizeName(128) // 'xxxl'
FlagUtils.getSizeName(100) // null
```
```

```APIDOC
## `sizes: Record<FlagSizeName, number>`

### Description
Predefined size constants mapping size names to pixel values.

### Response
#### Success Response
- **Record<FlagSizeName, number>**: An object containing predefined size constants.

### Example
```ts
// Example structure (actual values may vary)
{
  xs: 16,
  sm: 24,
  md: 32,
  lg: 48,
  xl: 64,
  xxl: 96,
  xxxl: 128
}
```
```

--------------------------------

### Vite (Solid) Flag Usage

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Example of using US and CN flags in a SolidJS application built with Vite. Includes rounded class for styling.

```tsx
import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags'
export default function App() {
return (
<main>
<h1>Country Flags</h1>
<div class="flex gap-4">
<FlagUs width={56} height={56} className="rounded-full" />
<FlagCn width={56} height={56} className="rounded-full" />
</div>
</main>
)
}
```

--------------------------------

### SolidStart Flag Usage

Source: https://react-circle-flags.js.org/llms-small.txt

Demonstrates using circle flags in a SolidStart application. Includes custom class for rounded corners.

```tsx
import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags'
export default function Home() {
  return (
    <main>
      <h1>Country Flags</h1>
      <div class="flex gap-4">
        <FlagUs width={64} height={64} className="rounded-full" />
        <FlagCn width={64} height={64} className="rounded-full" />
      </div>
    </main>
  )
}
```

--------------------------------

### FlagUtils Object

Source: https://react-circle-flags.js.org/_llms-txt/api-reference.txt

Utility object for flag operations, including formatting country codes, getting component names, determining size names, and validating country codes.

```typescript
const FlagUtils: {
  formatCountryCode: (code) => string;
  getComponentName: (code) => string;
  getSizeName: (pixels) => FlagSizeName | null;
  isValidCountryCode: (code) => boolean;
  sizes: typeof FlagSizes;
};
```

--------------------------------

### BuildMeta

Source: https://react-circle-flags.js.org/_llms-txt/api-reference.txt

Metadata related to the build process of the circle-flags library.

```APIDOC
## Properties

### builtTimestamp

- **Type**: `number`
- **Description**: Timestamp of when the build was created.

### circleFlagsCommitHash

- **Type**: `string`
- **Description**: The commit hash of the circle-flags repository used in this build.

### commitHash

- **Type**: `string`
- **Description**: The commit hash of the current build.

### version

- **Type**: `string`
- **Description**: The version of the library.
```

--------------------------------

### Implement Responsive Flag Sizes in React

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Dynamically adjust flag sizes in React based on window width using FlagUtils.sizes and event listeners for window resize. This ensures flags display optimally across different devices.

```typescript
import { FlagUtils } from '@sankyu/react-circle-flags'
import { FlagUs } from '@sankyu/react-circle-flags'
import { useEffect, useState } from 'react'

export function ResponsiveFlag() {
  const [size, setSize] = useState(FlagUtils.sizes.md)

  useEffect(() => {
    const updateSize = () => {
      const width = window.innerWidth
      if (width < 640) return setSize(FlagUtils.sizes.sm)
      if (width < 1024) return setSize(FlagUtils.sizes.md)
      setSize(FlagUtils.sizes.lg)
    }

    updateSize()
    window.addEventListener('resize', updateSize)
    return () => window.removeEventListener('resize', updateSize)
  }, [])

  return <FlagUs width={size} height={size} />
}
```

--------------------------------

### React Event Handlers

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Implement event handlers for flag components in React, such as click events. This example shows how to handle a click event on the FlagJp component and log coordinates.

```tsx
import type { MouseEvent } from 'react'
import { FlagJp } from '@sankyu/react-circle-flags'

export function InteractiveFlag() {
  const handleClick = (e: MouseEvent<SVGSVGElement>) => {
    console.log('Flag clicked at', e.clientX, e.clientY)
  }

  return (
    <FlagJp width={48} height={48} onClick={handleClick} style={{ cursor: 'pointer' }} />
  )
}
```

--------------------------------

### Vite (Solid) Flag Usage

Source: https://react-circle-flags.js.org/llms-full.txt

Demonstrates using FlagUs and FlagCn components in a Vite project with Solid. Imports are from '@sankyu/solid-circle-flags'. Uses 'class' for styling.

```tsx
import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags' 


export default function App() {
  return (
    <main>
      <h1>Country Flags</h1>
      <div class="flex gap-4">
        <FlagUs width={56} height={56} className="rounded-full" />
        <FlagCn width={56} height={56} className="rounded-full" />
      </div>
    </main>
  )
}
```

--------------------------------

### Solid.js SVG Prop Typing

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Utilize standard Solid.js SVG props with flag components. This example shows passing SVG props to the FlagUs component in a Solid.js application.

```tsx
import type { JSX } from 'solid-js'
import { FlagUs } from '@sankyu/solid-circle-flags'

interface Props {
  flagProps?: JSX.SvgSVGAttributes<SVGSVGElement>
}

export function FlagItem(props: Props) {
  return <FlagUs {...props.flagProps} />
}
```

--------------------------------

### FlagUtils

Source: https://react-circle-flags.js.org/_llms-txt/api-reference.txt

A collection of utility functions for working with flag codes and sizes, including formatting, component name retrieval, size name conversion, and validation.

```APIDOC
## Variable FlagUtils

### Description
Utility functions for working with flag codes and sizes.

### Type Declaration
```ts
const FlagUtils: {
  formatCountryCode: (code) => string;
  getComponentName: (code) => string;
  getSizeName: (pixels) => FlagSizeName | null;
  isValidCountryCode: (code) => boolean;
  sizes: typeof FlagSizes;
};
```

### Type Declaration Details

#### formatCountryCode()

##### Description
Formats a country code.

##### Parameters
- **code** (string) - The country code to format.

##### Returns
(string) - The formatted country code.

#### getComponentName()

##### Description
Retrieves the component name for a given country code.

##### Parameters
- **code** (string) - The country code.

##### Returns
(string) - The component name.

#### getSizeName()

##### Description
Converts pixel size to a flag size name.

##### Parameters
- **pixels** (number) - The size in pixels.

##### Returns
(FlagSizeName | null) - The corresponding flag size name or null if not found.

#### isValidCountryCode()

##### Description
Validates if a given code is a valid country code.

##### Parameters
- **code** (string) - The code to validate.

##### Returns
(boolean) - True if the code is valid, false otherwise.

#### sizes

##### Description
Access to the standard flag sizes.

##### Type
(typeof FlagSizes)
```

--------------------------------

### React SVG Prop Typing

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Use standard React SVG props with flag components for type safety. This example shows how to pass SVG props to the FlagUs component.

```tsx
import type { SVGProps } from 'react'
import { FlagUs } from '@sankyu/react-circle-flags'

interface Props {
  flagProps?: SVGProps<SVGSVGElement>
}

export function FlagItem({ flagProps }: Props) {
  return <FlagUs {...flagProps} />
}
```

--------------------------------

### React Flag Code Utilities

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Provides utility functions for working with flag codes in React applications. Includes functions to get component names and format country codes.

```typescript
import { FlagUtils } from '@sankyu/react-circle-flags'

// Convert country code to component name (PascalCase)
FlagUtils.getComponentName('us') // 'FlagUs'
FlagUtils.getComponentName('gb-eng') // 'FlagGbEng'

// Normalize display format (uppercase)
FlagUtils.formatCountryCode('us') // 'US'
```

--------------------------------

### React Named Imports for Flags

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Import specific flags by name for static use cases. Recommended for optimal bundle size and tree-shaking.

```tsx
import { FlagUs, FlagCn, FlagGb } from '@sankyu/react-circle-flags'

export function Header() {
  return (
    <div>
      <FlagUs width={32} height={32} />
      <FlagCn width={32} height={32} />
      <FlagGb width={32} height={32} />
    </div>
  )
}
```

--------------------------------

### React FlagUtils Toolkit

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Explores the comprehensive `FlagUtils` object in React for validating, formatting, and retrieving flag component names. Also shows how to handle flag sizes.

```typescript
import { FlagUtils } from '@sankyu/react-circle-flags'

// Validate country codes
FlagUtils.isValidCountryCode('us') // true
FlagUtils.isValidCountryCode('invalid') // false

// Format country codes
FlagUtils.formatCountryCode('us') // "US"

// Get component names
FlagUtils.getComponentName('us') // "FlagUs"

// Handle flag sizes
FlagUtils.getSizeName(48) // "lg"
FlagUtils.sizes.lg // 48
```

--------------------------------

### Get Flag Component Name in React

Source: https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt

Dynamically retrieve the component name for a given country code using FlagUtils.getComponentName in React. This is useful for rendering dynamic information about flags.

```typescript
import { FlagUtils } from '@sankyu/react-circle-flags'

export function FlagInfo({ code }: { code: string }) {
  const componentName = FlagUtils.getComponentName(code)
  const isValid = FlagUtils.isValidCountryCode(code)

  return (
    <div>
      <p>Country Code: {code.toUpperCase()}</p>
      <p>Component: {componentName}</p>
      <p>Status: {isValid ? 'Valid' : 'Invalid'}</p>
    </div>
  )
}
```

--------------------------------

### DynamicFlag with Strict Typing in Vue 3

Source: https://react-circle-flags.js.org/llms-full.txt

This Vue 3 example shows how to use DynamicFlag with the 'strict' prop for enhanced TypeScript safety, utilizing code coercion for unknown values.

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { DynamicFlag, coerceFlagCode } from '@sankyu/vue-circle-flags'


const props = defineProps<{ codeFromApi: string }>()
const safeCode = computed(() => coerceFlagCode(props.codeFromApi))
</script>


<template>
  <DynamicFlag strict :code="safeCode" :width="36" :height="36" />
</template>
```

--------------------------------

### Solid.js: Named Imports + Map for Dynamic Flags

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

A Solid.js implementation for rendering flags dynamically using named imports and a map. This approach is recommended for offline-first scenarios with a predefined set of country codes.

```tsx
import { FlagCn, FlagGb, FlagUs } from '@sankyu/solid-circle-flags'
const FLAGS = {
  cn: FlagCn,
  gb: FlagGb,
  us: FlagUs,
} as const
export function CountryFlag(props: { code: string }) {
  const normalized = props.code.toLowerCase()
  const Flag = FLAGS[normalized as keyof typeof FLAGS]
  if (!Flag) return <span title="Unknown country code">{props.code.toUpperCase()}</span>
  return <Flag width={36} height={36} />
}
```

--------------------------------

### TypeScript Flag Code Types

Source: https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt

Demonstrates the usage of `FlagCode` and `CountryCode` union types for ensuring type safety with flag codes in TypeScript. Shows examples of valid and invalid codes.

```typescript
import { FlagCode, CountryCode, coerceFlagCode, isFlagCode, FlagComponentProps } from '@sankyu/react-circle-flags'

const validCode: FlagCode = 'us' // ✓ Valid
const invalidCode: FlagCode = 'invalid' // ✗ Type error

// CountryCode: a semantic alias of FlagCode (same union)
const alsoValid: CountryCode = validCode

// FlagComponentProps: Standard props for flag components
const props: FlagComponentProps = {
  width: 64,
  height: 64,
  className: 'my-flag',
}

const fromApi: string = 'US'
const safeCode = coerceFlagCode(fromApi)
const isNormalizedValid = isFlagCode('us')
```

--------------------------------

### FlagUtils

Source: https://react-circle-flags.js.org/llms-small.txt

A collection of utility functions for working with flag codes and sizes.

```APIDOC
## Variable FlagUtils

### Description
Utility functions for flag operations.

### Type Declaration
```ts
const FlagUtils: {
  formatCountryCode: (code: string) => string;
  getComponentName: (code: string) => string;
  getSizeName: (pixels: number) => "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | null;
  isValidCountryCode: (code: string) => boolean;
  sizes: typeof FlagSizes;
};
```

### Type Declaration Details

#### formatCountryCode()

##### Description
Formats a country code.

##### Parameters
- **code** (string) - The country code to format.

##### Returns
(string) - The formatted country code.

#### getComponentName()

##### Description
Gets the component name for a given country code.

##### Parameters
- **code** (string) - The country code.

##### Returns
(string) - The component name.

#### getSizeName()

##### Description
Gets the size name corresponding to a given pixel value.

##### Parameters
- **pixels** (number) - The size in pixels.

##### Returns
("xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | null) - The size name or null if not found.

#### isValidCountryCode()

##### Description
Checks if a given code is a valid country code.

##### Parameters
- **code** (string) - The country code to validate.

##### Returns
(boolean) - True if the code is valid, false otherwise.

#### sizes

##### Description
Access to the standard flag sizes.

##### Type
(typeof FlagSizes)
```