This is the abridged developer documentation for circle-flags-ui Docs (@sankyu/react-circle-flags, @sankyu/vue-circle-flags, @sankyu/solid-circle-flags) # API is Deprecated! > is deprecated and no longer documented in the main guides. Deprecated `` API is deprecated and is **not recommended for new code**. It remains in the package temporarily for backward compatibility, but it may be removed in a future major version. ## Why it’s deprecated [Section titled “Why it’s deprecated”](#why-its-deprecated) `` fetches SVG at runtime and injects it into the DOM. * **Not offline-first:** each country code triggers a network request * **Availability & latency risks:** blocked/slow networks cause loading/error states * **SVG props mismatch:** after loading it renders a wrapper (`div`) with injected SVG HTML, so many SVG-only props (e.g. `stroke`, `viewBox`) won’t apply ## What to use instead [Section titled “What to use instead”](#what-to-use-instead) ### 1) Named imports (recommended) [Section titled “1) Named imports (recommended)”](#1-named-imports-recommended) Use this when the flags are known at build time (best bundle size, no network): ```tsx import { FlagCn, FlagGb, FlagUs } from '@sankyu/react-circle-flags' export function Header() { return (
) } ``` ### 2) Named imports + map (runtime, finite set) [Section titled “2) Named imports + map (runtime, finite set)”](#2-named-imports--map-runtime-finite-set) Use this when codes are runtime values but the set is finite: ```tsx import { FlagCn, FlagGb, FlagUs } from '@sankyu/react-circle-flags' const FLAGS = { cn: FlagCn, gb: FlagGb, us: FlagUs } as const export function CountryFlag({ code }: { code: string }) { const normalized = code.toLowerCase() const Flag = FLAGS[normalized as keyof typeof FLAGS] return Flag ? : {code.toUpperCase()} } ``` ### 3) DynamicFlag (runtime, but bundles all flags) [Section titled “3) DynamicFlag (runtime, but bundles all flags)”](#3-dynamicflag-runtime-but-bundles-all-flags) Use this when you must render any code synchronously and stay offline: ```tsx import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ code }: { code: string }) { return } ``` ## See also [Section titled “See also”](#see-also) * [/docs/guides/getting-started/usage →](/docs/guides/getting-started/usage/) * [/docs/guides/getting-started/dynamic-flags →](/docs/guides/getting-started/dynamic-flags/) * [/docs/guides/getting-started/bundle-size →](/docs/guides/getting-started/bundle-size/) # Using CDN (No npm) > Load @sankyu/react-circle-flags from an ESM CDN without installing dependencies. This page is for **prototyping** and **online sandboxes**. If you control your build, prefer installing from npm and bundling locally (best performance and offline support). Security & stability * You are executing JavaScript from a third-party origin. Only use CDNs you trust. * Always pin versions in production to avoid unexpected breaking changes. ## Quick start (esm.sh) [Section titled “Quick start (esm.sh)”](#quick-start-esmsh) ```html
``` ## Import only what you need [Section titled “Import only what you need”](#import-only-what-you-need) Most ESM CDNs support an `exports` query to avoid pulling in unused exports. ```js import { FlagCn, FlagUs, } from 'https://esm.sh/@sankyu/react-circle-flags@1.6.2?exports=FlagCn,FlagUs' ``` ## Runtime codes (finite set) [Section titled “Runtime codes (finite set)”](#runtime-codes-finite-set) When country codes are runtime values, keep it offline-first by mapping a finite set: ```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 ? : {String(code).toUpperCase()} } ``` ## Version pinning [Section titled “Version pinning”](#version-pinning) ```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' ``` ## CDN options [Section titled “CDN options”](#cdn-options) All of these provide ESM support with dependency resolution: esm.sh Great defaults, good caching, widely used. Skypack Stable ESM CDN with long history. esm.run Fast ESM CDN (jsDelivr ecosystem). # FlagUtils Toolkit > Common utility functions for validating, formatting flag codes, and handling sizes. `FlagUtils` provides commonly used utility functions for validating, formatting flag codes, and handling sizes. ## Import [Section titled “Import”](#import) * React ```tsx import { FlagUtils } from '@sankyu/react-circle-flags' ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { FlagUtils } from '@sankyu/solid-circle-flags' ``` ## API Reference [Section titled “API Reference”](#api-reference) ### Flag code utilities [Section titled “Flag code utilities”](#flag-code-utilities) #### `isValidCountryCode(code: string): boolean` [Section titled “isValidCountryCode(code: string): boolean”](#isvalidcountrycodecode-string-boolean) Check if a string is a valid country/subdivision code. ```ts FlagUtils.isValidCountryCode('us') // true FlagUtils.isValidCountryCode('US') // true (case-insensitive) FlagUtils.isValidCountryCode('invalid') // false ``` #### `formatCountryCode(code: string): string` [Section titled “formatCountryCode(code: string): string”](#formatcountrycodecode-string-string) Normalize a country code to uppercase display format. ```ts FlagUtils.formatCountryCode('us') // 'US' FlagUtils.formatCountryCode('Us') // 'US' FlagUtils.formatCountryCode('invalid') // 'INVALID' (no validation) ``` #### `getComponentName(code: string): string` [Section titled “getComponentName(code: string): string”](#getcomponentnamecode-string-string) Get the component name for a flag code (e.g., `FlagUs`). ```ts FlagUtils.getComponentName('us') // 'FlagUs' FlagUtils.getComponentName('gb-eng') // 'FlagGbEng' ``` ### Size utilities [Section titled “Size utilities”](#size-utilities) #### `getSizeName(pixels: number): FlagSizeName | null` [Section titled “getSizeName(pixels: number): FlagSizeName | null”](#getsizenamepixels-number-flagsizename--null) Get the predefined size name from pixel value. ```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 ``` #### `sizes: Record` [Section titled “sizes: Record\”](#sizes-recordflagsizename-number) Predefined size constants. ```ts FlagUtils.sizes.xs // 16 FlagUtils.sizes.sm // 24 FlagUtils.sizes.md // 32 FlagUtils.sizes.lg // 48 FlagUtils.sizes.xl // 64 FlagUtils.sizes.xxl // 96 FlagUtils.sizes.xxxl // 128 ``` ## Usage Examples [Section titled “Usage Examples”](#usage-examples) ### Validating user input [Section titled “Validating user input”](#validating-user-input) * React ```tsx import { FlagUtils } from '@sankyu/react-circle-flags' import { useState } from 'react' export function CountrySearch() { const [code, setCode] = useState('') const isValid = FlagUtils.isValidCountryCode(code) return (
setCode(e.target.value)} placeholder="Enter country code (e.g., us, cn, gb)" /> {!isValid && code &&

Invalid country code

}
) } ``` * Vue 3 ```vue ``` ### Responsive flag sizes [Section titled “Responsive flag sizes”](#responsive-flag-sizes) * React ```tsx 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 } ``` * Vue 3 ```vue ``` ### Getting component names dynamically [Section titled “Getting component names dynamically”](#getting-component-names-dynamically) * React ```tsx import { FlagUtils } from '@sankyu/react-circle-flags' export function FlagInfo({ code }: { code: string }) { const componentName = FlagUtils.getComponentName(code) const isValid = FlagUtils.isValidCountryCode(code) return (

Country Code: {code.toUpperCase()}

Component: {componentName}

Status: {isValid ? 'Valid' : 'Invalid'}

) } ``` * Vue 3 ```vue ``` ## Type Safety [Section titled “Type Safety”](#type-safety) All `FlagUtils` methods are fully typed with TypeScript: ```ts import { FlagUtils, type FlagSizeName } from '@sankyu/react-circle-flags' // Size name is a union type const size: FlagSizeName = FlagUtils.getSizeName(32) // 'md' const sizeOrNull: FlagSizeName | null = FlagUtils.getSizeName(100) // null // Size object is typed const small: number = FlagUtils.sizes.sm // 24 ``` ## See also [Section titled “See also”](#see-also) [Type Utilities ](./type-utilities/)Learn about type-safe flag code utilities [Dynamic Flags ](../getting-started/dynamic-flags/)Render flags from runtime ISO codes [API Reference ](/reference/api/variableflagutils/)Full FlagUtils API documentation # Type Utilities > Type-safe utilities for working with flag codes in TypeScript. Type utilities provide stronger type safety guarantees when working with flag codes in TypeScript. ## Why Type Utilities? [Section titled “Why Type Utilities?”](#why-type-utilities) When working with flag codes from external sources (APIs, user input, databases), you often face a trade-off: * **Loose typing (`string`)**: Runtime errors, no autocomplete * **Strict typing (`FlagCode`)**: Compile-time errors, but requires validation Type utilities bridge this gap by providing: 1. **Runtime validation** with `isFlagCode()` 2. **Type coercion** with `coerceFlagCode()` 3. **Type-safe unions** with `FlagCode` type ## Import [Section titled “Import”](#import) * React ```tsx import { coerceFlagCode, isFlagCode } from '@sankyu/react-circle-flags' import { type FlagCode } from '@sankyu/react-circle-flags' ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { coerceFlagCode, isFlagCode } from '@sankyu/solid-circle-flags' import { type FlagCode } from '@sankyu/solid-circle-flags' ``` ## API Reference [Section titled “API Reference”](#api-reference) ### `FlagCode` type [Section titled “FlagCode type”](#flagcode-type) A union type of all valid country/subdivision codes. ```ts type FlagCode = 'ad' | 'ae' | 'af' | ... | 'zw' | 'gb-eng' | 'gb-nir' | ... ``` **Usage:** ```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' ``` ### `isFlagCode(code: string): code is FlagCode` [Section titled “isFlagCode(code: string): code is FlagCode”](#isflagcodecode-string-code-is-flagcode) Type guard that checks if a string is a valid flag code. ```ts isFlagCode('us') // true isFlagCode('US') // false (expects normalized lowercase input) isFlagCode('invalid') // false ``` ### `coerceFlagCode(code: string, fallback?: FlagCode): FlagCode` [Section titled “coerceFlagCode(code: string, fallback?: FlagCode): FlagCode”](#coerceflagcodecode-string-fallback-flagcode-flagcode) Safely converts a string to a valid flag code. * If the value is a valid flag code (case-insensitive), returns the lowercase version * Otherwise, returns the fallback (default: `'xx'`) ```ts coerceFlagCode('US') // 'us' coerceFlagCode('Us') // 'us' coerceFlagCode('invalid') // 'xx' (default fallback) coerceFlagCode('invalid', 'un') // 'un' (custom fallback) coerceFlagCode('GB-ENG') // 'gb-eng' ``` ## Usage Examples [Section titled “Usage Examples”](#usage-examples) ### Type narrowing with `isFlagCode` [Section titled “Type narrowing with isFlagCode”](#type-narrowing-with-isflagcode) Use `isFlagCode()` in conditionals to narrow types: * 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 } // Fallback for invalid codes return {code.toUpperCase()} (invalid) } ``` * Vue 3 ```vue ``` ### Safe coercion with `coerceFlagCode` [Section titled “Safe coercion with coerceFlagCode”](#safe-coercion-with-coerceflagcode) Use `coerceFlagCode()` to handle unknown strings safely: * React ```tsx import { coerceFlagCode } from '@sankyu/react-circle-flags' import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ codeFromApi }: { codeFromApi: string }) { // Coerce to a safe FlagCode (invalid codes become 'xx') const safeCode = coerceFlagCode(codeFromApi) // Now we can use strict mode with full type safety return } ``` * Vue 3 ```vue ``` ### Custom fallback [Section titled “Custom fallback”](#custom-fallback) Provide a custom fallback for invalid codes: * React ```tsx import { coerceFlagCode } from '@sankyu/react-circle-flags' import { DynamicFlag } from '@sankyu/react-circle-flags' import { type FlagCode } from '@sankyu/react-circle-flags' export function CountryFlag({ code, fallbackCode = 'un', }: { code: string fallbackCode?: FlagCode }) { // Use a custom fallback instead of 'xx' const safeCode = coerceFlagCode(code, fallbackCode) return } ``` ### Form validation [Section titled “Form validation”](#form-validation) Validate form input with type safety: * React ```tsx import { useState } from 'react' import { isFlagCode, type FlagCode } from '@sankyu/react-circle-flags' export function CountryForm() { const [code, setCode] = useState('') const [error, setError] = useState('') const handleSubmit = () => { const normalized = code.trim().toLowerCase() if (!isFlagCode(normalized)) { setError('Invalid country code') return } // TypeScript knows `normalized` is FlagCode here const validCode: FlagCode = normalized console.log('Valid code:', validCode) setError('') } return (
e.preventDefault()}> setCode(e.target.value)} placeholder="Enter country code" /> {error &&

{error}

}
) } ``` * Vue 3 ```vue ``` ## Strict Mode with DynamicFlag [Section titled “Strict Mode with DynamicFlag”](#strict-mode-with-dynamicflag) Combine type utilities with `strict` prop for maximum type safety: * React ```tsx import { coerceFlagCode } from '@sankyu/react-circle-flags' import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ codeFromApi }: { codeFromApi: string }) { // Coerce unknown string to valid FlagCode const safeCode = coerceFlagCode(codeFromApi) // strict mode ensures TypeScript validates the code at compile time return } ``` * Vue 3 ```vue ``` ## Comparison [Section titled “Comparison”](#comparison) | Utility | Runtime Check | Return Type | Use Case | | ------------------ | -------------- | ------------------ | ------------------------------ | | `isFlagCode()` | Yes | `code is FlagCode` | Type narrowing in conditionals | | `coerceFlagCode()` | Yes | `FlagCode` | Safe conversion with fallback | | `FlagCode` type | No (zero-cost) | `FlagCode` | Compile-time type annotation | ## See also [Section titled “See also”](#see-also) [FlagUtils Toolkit ](./flag-utils/)Common utility functions for flag codes [Dynamic Flags ](../getting-started/dynamic-flags/)Render flags from runtime ISO codes [API Reference ](/reference/api/readme/)Full type utilities API documentation # Getting Started > Overview of installation, usage, and core concepts. Welcome to **circle-flags-ui**, a modern library for circular flag components supporting multiple frameworks. ## 📖 Overview [Section titled “📖 Overview”](#-overview) This library provides **400+ circular SVG flag components** with **Full-TypeScript support** & **Tree-shaking Optimization**. Perfect for applications that need fast, crisp country flags without external image requests. ## 📦 Available Packages [Section titled “📦 Available Packages”](#-available-packages) | Package | Framework | Status | | ---------------------------- | --------- | -------- | | `@sankyu/react-circle-flags` | React | ✅ Stable | | `@sankyu/vue-circle-flags` | Vue 3 | 🚧 Beta | | `@sankyu/solid-circle-flags` | Solid.js | 🚧 Beta | ## 🚀 Quick start [Section titled “🚀 Quick start”](#-quick-start) Follow these guides to master the library: [1. 📦 Installation ](./installation/)Add the package to your project with your preferred package manager [2. 📚 Basic Usage ](./usage/)Learn how to import and render flag components [3. 🎨 Styling ](./styling/)Customize flags with Tailwind, CSS modules, or styled-components [4. 🌀 Dynamic Flags ](./dynamic-flags/)Render flags based on runtime country codes [5. 🧑‍💻 TypeScript ](./typescript/)Leverage full type safety and autocomplete [6. 📄 Bundle Size ](./bundle-size/)Optimize your bundle with tree-shaking best practices [7. 🤖 LLM Context ](/llms.txt)Use llms.txt endpoints for faster AI-assisted coding workflows ## ✨ Key Features [Section titled “✨ Key Features”](#-key-features) 400+ Flags Comprehensive collection of country, territory, subdivision, and organization flags. TypeScript Ready Full type definitions with autocomplete and type safety for all components. Tree-shakable ESM + CJS outputs with named exports for optimal bundle size. SSR Compatible Works seamlessly with Next.js, Nuxt.js, Remix, SolidStart, Astro, and other SSR frameworks. Inline SVG Flags are embedded as framework components (named imports & DynamicFlag), so they work offline with no external requests. Standard Props Named imports & DynamicFlag accept standard SVG props for easy customization. ## At a glance [Section titled “At a glance”](#at-a-glance) Modern Architecture * ESM + CJS dual format * Tree-shaking friendly * Minified production builds Developer Experience * Full TypeScript definitions * Consistent naming pattern * Standard SVG props Framework Support * React: Next.js (App Router & Pages), Remix… * Vue: Nuxt.js, Vue Router… * Solid: SolidStart… * …and more! Performance * Offline-first rendering with no external requests (named imports & DynamicFlag) * Tiny per-flag size (\~1-2 KB) ## What’s next? [Section titled “What’s next?”](#whats-next) Ready to dive in? Start with [Installation](./installation/) to add the library to your project. # Bundle Size & Tree-shaking > Keep bundles small by choosing the right import strategy. Optimize your bundle size by choosing the right approach for your use case. ## Import strategies overview [Section titled “Import strategies overview”](#import-strategies-overview) ### 1. Named Imports [Section titled “1. Named Imports”](#1-named-imports) * **Best for:** Static flags known at build time * **Bundle impact:** \~950 bytes per flag * **Tree-shaking:** ✅ Excellent * **Loading:** Synchronous, instant **[View detailed usage with code examples →](./usage/#1-named-imports)** ### 2. DynamicFlag [Section titled “2. DynamicFlag”](#2-dynamicflag) * **Best for:** Offline-first apps that must render any runtime code synchronously * **Bundle impact:** \~600 KB (all flags bundled) * **Tree-shaking:** ❌ None * **Loading:** Synchronous, instant **[View detailed usage with code examples →](./usage/#2-dynamicflag)** ## Bundle size comparison [Section titled “Bundle size comparison”](#bundle-size-comparison) | Method | Bundle Size | Tree-shaking | Loading | Use Case | | ---------------------------- | ----------- | ------------ | ------- | -------------------------------- | | **Named imports (3 flags)** | \~2.8 KB | ✅ Excellent | Instant | Known flags at build time | | **Named imports (10 flags)** | \~9.5 KB | ✅ Excellent | Instant | Common flags header | | **DynamicFlag** | \~600 KB | ❌ None | Instant | CDN-restricted, all flags needed | ## Expected bundle sizes [Section titled “Expected bundle sizes”](#expected-bundle-sizes) ## Performance tips [Section titled “Performance tips”](#performance-tips) Code Splitting Split flag components across routes to load only what’s needed per page. Lazy Loading Use your framework’s lazy loading (React `lazy()`, Vue `defineAsyncComponent`, Solid `lazy()`) to defer flags until they’re actually rendered. Static Analysis Run bundle analysis regularly to catch unexpected size increases. Prefer Offline-first Default to named imports. If you must support any runtime code synchronously, use DynamicFlag. ## Analyzing your bundle [Section titled “Analyzing your bundle”](#analyzing-your-bundle) Use these tools to verify your bundle size: ```bash # Webpack Bundle Analyzer npm install --save-dev webpack-bundle-analyzer # Vite Bundle Analyzer npm install --save-dev rollup-plugin-visualizer # Next.js Bundle Analyzer npm install --save-dev @next/bundle-analyzer ``` ## Related [Section titled “Related”](#related) [Basic Usage ](./usage/)Learn how to import and use flag components with code examples [Dynamic Flags ](./dynamic-flags/)Offline-first strategies for runtime ISO codes # Dynamic Flags > Render flags from runtime ISO codes. ## Decision guide [Section titled “Decision guide”](#decision-guide) * **You can enumerate the possible codes (finite set):** use **Named Imports + Map** (recommended) * **You need to render any code synchronously and stay offline:** use **DynamicFlag** ## Why runtime flags? [Section titled “Why runtime flags?”](#why-runtime-flags) In many apps, country codes come from runtime data: * User-selected countries (forms, settings) * API/database values (profiles, records) * Location-based content ## Strategy 1: Named Imports + Map (Recommended) [Section titled “Strategy 1: Named Imports + Map (Recommended)”](#strategy-1-named-imports--map-recommended) This stays **offline-first** while still letting you render runtime values. * React ```tsx import { FlagCn, FlagGb, FlagUs } from '@sankyu/react-circle-flags' const FLAGS = { cn: FlagCn, gb: FlagGb, us: FlagUs, } as const export function CountryFlag({ code }: { code: string }) { const normalized = code.toLowerCase() const Flag = FLAGS[normalized as keyof typeof FLAGS] if (!Flag) return {code.toUpperCase()} return } ``` * Vue 3 ```vue ``` * Solid.js ```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 {props.code.toUpperCase()} return } ``` ## Strategy 2: DynamicFlag (Offline, Bundles All Flags) [Section titled “Strategy 2: DynamicFlag (Offline, Bundles All Flags)”](#strategy-2-dynamicflag-offline-bundles-all-flags) Use this when you truly need to support **any** runtime code and still render synchronously with full SVG props. Large bundle `DynamicFlag` bundles **ALL 400+ flags** (roughly **\~600 KB**). Only use this when the trade-off is acceptable. * React ```tsx import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ code }: { code: string }) { return } ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { DynamicFlag } from '@sankyu/solid-circle-flags' export function CountryFlag(props: { code: string }) { return } ``` ### Strict typing (optional) [Section titled “Strict typing (optional)”](#strict-typing-optional) If you can guarantee that your runtime value is already a **valid** country code (for example, from a typed list), enable `strict` for stronger TypeScript constraints: * React ```tsx import { DynamicFlag, coerceFlagCode } from '@sankyu/react-circle-flags' export function CountryFlag({ codeFromApi }: { codeFromApi: string }) { // Coerce unknown runtime data to a safe union (unknown values become "xx") const safeCode = coerceFlagCode(codeFromApi) return } ``` * Vue 3 ```vue ``` ## Quick comparison [Section titled “Quick comparison”](#quick-comparison) | Strategy | Bundle impact | Network | Offline-first | | ------------------- | ----------------------------- | ------- | ------------- | | Named Imports + Map | \~950 bytes per imported flag | None | ✅ | | DynamicFlag | \~600 KB | None | ✅ | ## Next step [Section titled “Next step”](#next-step) [Bundle Size ](../bundle-size/)Learn about bundle size optimization and tree-shaking strategies # Installation > Add the package to your project. ## Choose your framework [Section titled “Choose your framework”](#choose-your-framework) * React ## Install the package [Section titled “Install the package”](#install-the-package) Choose your preferred package manager to install the library: * npm ```bash npm install @sankyu/react-circle-flags ``` * pnpm ```bash pnpm add @sankyu/react-circle-flags ``` * yarn ```bash yarn add @sankyu/react-circle-flags ``` * bun ```bash bun add @sankyu/react-circle-flags ``` * Vue 3 ```bash npm install @sankyu/react-circle-flags ``` * Solid.js ```bash pnpm add @sankyu/react-circle-flags ``` * npm ```bash yarn add @sankyu/react-circle-flags ``` * pnpm ```bash bun add @sankyu/react-circle-flags ``` * yarn ## Install the package [Section titled “Install the package”](#install-the-package-1) Beta Release `@sankyu/vue-circle-flags` is currently in **beta**. APIs may change in future releases. Choose your preferred package manager to install the library: * npm ```bash npm install @sankyu/vue-circle-flags ``` * pnpm ```bash pnpm add @sankyu/vue-circle-flags ``` * yarn ```bash yarn add @sankyu/vue-circle-flags ``` * bun ```bash bun add @sankyu/vue-circle-flags ``` * bun ```bash npm install @sankyu/vue-circle-flags ``` * npm ```bash pnpm add @sankyu/vue-circle-flags ``` * pnpm ```bash yarn add @sankyu/vue-circle-flags ``` * yarn ```bash bun add @sankyu/vue-circle-flags ``` * bun ## Install the package [Section titled “Install the package”](#install-the-package-2) Beta Release `@sankyu/solid-circle-flags` is currently in **beta**. APIs may change in future releases. Choose your preferred package manager to install the library: * npm ```bash npm install @sankyu/solid-circle-flags ``` * pnpm ```bash pnpm add @sankyu/solid-circle-flags ``` * yarn ```bash yarn add @sankyu/solid-circle-flags ``` * bun ```bash bun add @sankyu/solid-circle-flags ``` * npm ```bash npm install @sankyu/solid-circle-flags ``` * pnpm ```bash pnpm add @sankyu/solid-circle-flags ``` * yarn ```bash yarn add @sankyu/solid-circle-flags ``` * bun ```bash bun add @sankyu/solid-circle-flags ``` ## LLM-friendly docs [Section titled “LLM-friendly docs”](#llm-friendly-docs) Using AI coding assistants? Start from these context endpoints: [llms.txt ](/llms.txt)Entry file with project summary and recommended docs paths [llms-small.txt ](/llms-small.txt)Token-optimized context for fast prompting and iteration [llms-full.txt ](/llms-full.txt)Full documentation context for deeper analysis ## Next step [Section titled “Next step”](#next-step) [Basic Usage ](../usage/)Learn how to import and render flag components in your application # Styling > Apply className, style, and layout styles to flags. Named import flags and `DynamicFlag` accept standard SVG props, making them easy to style with any CSS approach. ## Styling methods [Section titled “Styling methods”](#styling-methods) Tailwind CSS Use utility classes for rapid styling with design consistency. Inline Styles Perfect for dynamic styles or one-off customizations. CSS Modules Scoped styles with traditional CSS syntax and no naming conflicts. Styled Components CSS-in-JS solution with full theme integration. ## Examples [Section titled “Examples”](#examples) * Tailwind CSS ```tsx import { FlagUs } from '@sankyu/react-circle-flags' export default function TailwindFlag() { return ( ) } ``` * Inline Styles ```tsx import { FlagUs } from '@sankyu/react-circle-flags' export default function InlineFlag() { return ( ) } ``` * CSS Modules ```tsx import { FlagUs } from '@sankyu/react-circle-flags' import styles from './flags.module.css' export default function CssModuleFlag() { return } ``` flags.module.css ```css .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); } ``` * Styled Components ```tsx import styled from 'styled-components' import { FlagUs } from '@sankyu/react-circle-flags' const StyledFlag = styled(FlagUs)` width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s; &:hover { transform: scale(1.1); } ` export default function StyledFlag() { return } ``` * Vue 3 ```vue ``` * Solid.js Solid (beta): use `className` for named-import flags. ```tsx import { FlagUs } from '@sankyu/solid-circle-flags' export default function SolidFlag() { return ( ) } ``` ## Common customizations [Section titled “Common customizations”](#common-customizations) All flags support standard SVG properties: * React ```tsx import { FlagJp } from '@sankyu/react-circle-flags' export default function CustomFlag() { return ( console.log('Flag clicked!')} aria-label="Japan flag" /> ) } ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { FlagJp } from '@sankyu/solid-circle-flags' export default function CustomFlag() { return ( console.log('Flag clicked!')} aria-label="Japan flag" /> ) } ``` ## Next step [Section titled “Next step”](#next-step) [Dynamic Flags ](../dynamic-flags/)Learn how to render flags based on runtime country codes # TypeScript > Use the SVG prop types in your components. All flag components are fully typed with TypeScript, providing autocomplete and type safety out of the box. ## SVG prop typing [Section titled “SVG prop typing”](#svg-prop-typing) * React All flag components accept standard React SVG props: ```tsx import type { SVGProps } from 'react' import { FlagUs } from '@sankyu/react-circle-flags' interface Props { flagProps?: SVGProps } export function FlagItem({ flagProps }: Props) { return } ``` * Vue 3 All flag components accept standard Vue SVG props: ```vue ``` * Solid.js All flag components accept standard Solid SVG props: ```tsx import type { JSX } from 'solid-js' import { FlagUs } from '@sankyu/solid-circle-flags' interface Props { flagProps?: JSX.SvgSVGAttributes } export function FlagItem(props: Props) { return } ``` ## Advanced typing examples [Section titled “Advanced typing examples”](#advanced-typing-examples) * Component Props ```tsx import type { SVGProps, ComponentProps } from 'react' import { FlagCn } from '@sankyu/react-circle-flags' // Method 1: Using SVGProps type FlagProps1 = SVGProps // Method 2: Using ComponentProps (recommended) type FlagProps2 = ComponentProps export function Flag(props: FlagProps2) { return } ``` * Reusable Wrapper ```tsx import type { ComponentProps, ComponentType } from 'react' import { FlagUs } from '@sankyu/react-circle-flags' type SvgFlagProps = ComponentProps type SvgFlagComponent = ComponentType interface FlagWithLabelProps extends SvgFlagProps { FlagComponent?: SvgFlagComponent label?: string } export function FlagWithLabel({ FlagComponent = FlagUs, label, ...svgProps }: FlagWithLabelProps) { return (
{label && {label}}
) } ``` * Event Handlers ```tsx import type { MouseEvent } from 'react' import { FlagJp } from '@sankyu/react-circle-flags' export function InteractiveFlag() { const handleClick = (e: MouseEvent) => { console.log('Flag clicked at', e.clientX, e.clientY) } return ( ) } ``` * Solid.js ```tsx import type { Component } from 'solid-js' import { FlagCn, FlagUs } from '@sankyu/solid-circle-flags' type FlagCnProps = Parameters[0] type SvgFlagProps = Parameters[0] type SvgFlagComponent = Component export function Flag(props: FlagCnProps) { return } export function FlagWithLabel( props: { FlagComponent?: SvgFlagComponent; label?: string } & SvgFlagProps ) { const { FlagComponent = FlagUs, label, ...svgProps } = props return (
{label && {label}}
) } ``` ## Type exports [Section titled “Type exports”](#type-exports) The library exports helpful types for advanced use cases: * React ```tsx import { coerceFlagCode, isFlagCode } from '@sankyu/react-circle-flags' import type { CountryCode, FlagCode, FlagComponentProps } from '@sankyu/react-circle-flags' // FlagCode: Union type of all available flag codes 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', } // Runtime data narrowing/coercion helpers const fromApi: string = 'US' const safeCode = coerceFlagCode(fromApi) // -> FlagCode (unknown values become "xx") const isNormalizedValid = isFlagCode('us') // true (expects already-normalized input) ``` * Vue 3 ```typescript import { coerceFlagCode, isFlagCode } from '@sankyu/vue-circle-flags' import type { CountryCode, FlagCode, FlagComponentProps } from '@sankyu/vue-circle-flags' // FlagCode: Union type of all available flag codes 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, class: 'my-flag', } const fromApi: string = 'US' const safeCode = coerceFlagCode(fromApi) const isNormalizedValid = isFlagCode('us') ``` * Solid.js ```typescript import { coerceFlagCode, isFlagCode } from '@sankyu/solid-circle-flags' import type { CountryCode, FlagCode, FlagComponentProps } from '@sankyu/solid-circle-flags' // FlagCode: Union type of all available flag codes 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') ``` ## Flag code utilities [Section titled “Flag code utilities”](#flag-code-utilities) * React ```tsx 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' ``` * Vue 3 ```typescript import { FlagUtils } from '@sankyu/vue-circle-flags' FlagUtils.getComponentName('us') // 'FlagUs' FlagUtils.formatCountryCode('us') // 'US' ``` * Solid.js ```typescript import { FlagUtils } from '@sankyu/solid-circle-flags' FlagUtils.getComponentName('us') // 'FlagUs' FlagUtils.formatCountryCode('us') // 'US' ``` ## FlagUtils toolkit [Section titled “FlagUtils toolkit”](#flagutils-toolkit) The `FlagUtils` object provides convenient utility functions for working with flag codes: * React ```tsx 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 ``` * Vue 3 ```typescript import { FlagUtils } from '@sankyu/vue-circle-flags' FlagUtils.isValidCountryCode('us') // true FlagUtils.formatCountryCode('us') // "US" FlagUtils.getComponentName('us') // "FlagUs" FlagUtils.getSizeName(48) // "lg" FlagUtils.sizes.lg // 48 ``` * Solid.js ```typescript import { FlagUtils } from '@sankyu/solid-circle-flags' FlagUtils.isValidCountryCode('us') // true FlagUtils.formatCountryCode('us') // "US" FlagUtils.getComponentName('us') // "FlagUs" FlagUtils.getSizeName(48) // "lg" FlagUtils.sizes.lg // 48 ``` ## Type safety with DynamicFlag [Section titled “Type safety with DynamicFlag”](#type-safety-with-dynamicflag) * React ```tsx import { DynamicFlag } from '@sankyu/react-circle-flags' import type { FlagCode } from '@sankyu/react-circle-flags' interface CountrySelectProps { selectedCountry: FlagCode onSelect: (code: FlagCode) => void } export function CountrySelect({ selectedCountry, onSelect }: CountrySelectProps) { return (
) } ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { createSignal } from 'solid-js' import { DynamicFlag } from '@sankyu/solid-circle-flags' import type { FlagCode } from '@sankyu/solid-circle-flags' export function CountrySelect() { const [selectedCountry, setSelectedCountry] = createSignal('us') return (
) } ``` ## Next step [Section titled “Next step”](#next-step) [Bundle Size & Tree-shaking ](../bundle-size/)Learn how to optimize your bundle size with proper import strategies # Basic Usage > Import and render flag components with different strategies. ## Import strategies [Section titled “Import strategies”](#import-strategies) Choose the right approach based on your use case: [1. Named Imports (Recommended) ](#1-named-imports) [2. DynamicFlag (Offline, Large Bundle) ](#2-dynamicflag) ### 1. Named Imports [Section titled “1. Named Imports”](#1-named-imports) **Best for static flags known at build time.** * **Bundle impact:** \~950 bytes per flag * **Tree-shaking:** ✅ Excellent * **Loading:** Synchronous, instant Import only the flags you need from the main entry: * React ```tsx import { FlagUs, FlagCn, FlagGb } from '@sankyu/react-circle-flags' export function Header() { return (
) } ``` * Vue 3 ```vue ``` * Solid.js Solid (beta): named-import flags currently use `className` for CSS classes. ```tsx import { FlagUs, FlagCn, FlagGb } from '@sankyu/solid-circle-flags' export function Header() { return (
) } ``` ### 2. DynamicFlag [Section titled “2. DynamicFlag”](#2-dynamicflag) Large Bundle Impact This component adds **\~600 KB** to your bundle (it bundles ALL 400+ flags). **Offline-first runtime flags (bundles all flags).** * **Bundle impact:** \~600 KB * **Tree-shaking:** ❌ None * **Loading:** Synchronous, instant Render any flag from runtime ISO codes without network requests: * React ```tsx import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ code }: { code: string }) { return } ``` * Vue 3 ```vue ``` * Solid.js ```tsx import { DynamicFlag } from '@sankyu/solid-circle-flags' export function CountryFlag(props: { code: string }) { return } ``` ## Naming convention [Section titled “Naming convention”](#naming-convention) All flag components follow a consistent naming pattern: Pattern Components use the format **`Flag{ISO}`** where ISO is the uppercase country code. Examples * `FlagUs` → United States * `FlagCn` → China * `FlagGb` → United Kingdom * `FlagJp` → Japan ## Framework examples [Section titled “Framework examples”](#framework-examples) The library works seamlessly with all modern frameworks: * Next.js ```tsx import { FlagUs, FlagCn } from '@sankyu/react-circle-flags' export default function Page() { return (

Country Flags

) } ``` * Remix ```tsx import { FlagUs, FlagCn } from '@sankyu/react-circle-flags' export default function Index() { return (

Country Flags

) } ``` * Vite (React) ```tsx import { FlagUs, FlagCn } from '@sankyu/react-circle-flags' function App() { return ( <>

Country Flags

) } export default App ``` * SolidStart ```tsx import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags' export default function Home() { return (

Country Flags

) } ``` * Vite (Solid) ```tsx import { FlagUs, FlagCn } from '@sankyu/solid-circle-flags' export default function App() { return (

Country Flags

) } ``` * Nuxt.js ```vue ``` * Vue 3 ```vue ``` ## Next steps [Section titled “Next steps”](#next-steps) [Bundle Size Optimization ](../bundle-size/)Compare bundle sizes and choose the best strategy [Styling ](../styling/)Customize flag appearance with CSS and inline styles [Dynamic Flags ](../dynamic-flags/)Render flags from runtime ISO codes (offline-first strategies) # Migrate from react-circle-flags > Switch from react-circle-flags to @sankyu/react-circle-flags (offline-first) Quick guide for migrating from `react-circle-flags` to `@sankyu/react-circle-flags`. ## Why switch? [Section titled “Why switch?”](#why-switch) Bundle Size Much smaller with tree-shaking (\~950 bytes per imported flag vs. 200 KB+) TypeScript Full type definitions with autocomplete for 400+ flags Offline-first Inline SVG components with no external requests (works offline) ## Migration (recommended): Named imports [Section titled “Migration (recommended): Named imports”](#migration-recommended-named-imports) Replace `react-circle-flags` runtime loader with tree-shakeable flag components. ```tsx import { FlagCn, FlagUs } from '@sankyu/react-circle-flags' export function Header() { return (
) } ``` ### Notes [Section titled “Notes”](#notes) * `react-circle-flags` uses string sizes like `height="35"`. This library uses numbers: `height={35}`. * All flags accept standard SVG props (`className`, `style`, event handlers, etc.). ## Runtime country codes [Section titled “Runtime country codes”](#runtime-country-codes) If country codes come from runtime data (API/user input), you have two offline-first options. ### Option A: Finite set (named imports + map) — recommended [Section titled “Option A: Finite set (named imports + map) — recommended”](#option-a-finite-set-named-imports--map--recommended) ```tsx import { FlagCn, FlagGb, FlagUs } from '@sankyu/react-circle-flags' const FLAGS = { cn: FlagCn, gb: FlagGb, us: FlagUs } as const export function CountryFlag({ code }: { code: string }) { const normalized = code.toLowerCase() const Flag = FLAGS[normalized as keyof typeof FLAGS] return Flag ? : {code.toUpperCase()} } ``` ### Option B: Any code (DynamicFlag) — bundles all flags [Section titled “Option B: Any code (DynamicFlag) — bundles all flags”](#option-b-any-code-dynamicflag--bundles-all-flags) ```tsx import { DynamicFlag } from '@sankyu/react-circle-flags' export function CountryFlag({ code }: { code: string }) { return } ``` Bundle size `DynamicFlag` bundles all 400+ flags into your app (large bundle). Prefer a finite map when you can. ## Bundle size comparison [Section titled “Bundle size comparison”](#bundle-size-comparison) | Approach | Bundle Size | Network | Offline | | ----------------------- | ----------- | ------- | ------- | | `react-circle-flags` | \~200 KB+ | None | ✅ | | Named imports (3 flags) | \~2.8 KB | None | ✅ | | DynamicFlag | \~600 KB | None | ✅ | ## Migration steps [Section titled “Migration steps”](#migration-steps) * npm ```bash npm uninstall react-circle-flags npm install @sankyu/react-circle-flags ``` * pnpm ```bash pnpm remove react-circle-flags pnpm add @sankyu/react-circle-flags ``` * yarn ```bash yarn remove react-circle-flags yarn add @sankyu/react-circle-flags ``` ## Need help? [Section titled “Need help?”](#need-help) * 📖 [Getting Started](/docs/guides/getting-started/) * 🧭 [Basic Usage](/docs/guides/getting-started/usage/) * 🌀 [Dynamic Flags](/docs/guides/getting-started/dynamic-flags/) # API Reference > API documentation for @sankyu/react-circle-flags components and utilities. ## API Reference [Section titled “API Reference”](#api-reference) WIP. # coerceFlagCode ```ts function coerceFlagCode(code, fallback): | "sh-ac" | "bq-bo" | "no" | "hk" | "fr-cp" | "io" | "es-ce" | "european_union" | "fr" | "au" | "es-cn" | "sh-hl" | "soviet_union" | "sh-ta" | "gb" | "us" | "as" | "gu" | "mp" | "pr" | "vi" | "sm" | "md" | "ac" | "ad" | "ae" | "af-emirate" | "af" | "ag" | "ai" | "al" | "am" | "an" | "ao" | "aq-true_south" | "aq" | "ar" | "artsakh" | "at" | "au-aboriginal" | "au-act" | "au-nsw" | "au-nt" | "au-qld" | "au-sa" | "au-tas" | "au-torres_strait_islands" | "au-vic" | "au-wa" | "aw" | "ax" | "az" | "ba" | "bb" | "bd" | "be" | "bf" | "bg" | "bh" | "bi" | "bj" | "bl" | "bm" | "bn" | "bo" | "bq-sa" | "bq-se" | "bq" | "br" | "bs" | "bt" | "bv" | "bw" | "by-historical" | "by" | "bz" | "ca-bc" | "ca-qc" | "ca" | "cc" | "cd" | "cf" | "cg" | "ch-gr" | "ch" | "ci" | "ck" | "cl" | "cm" | "cn-hk" | "cn-xj" | "cn-xz" | "cn" | "co" | "cp" | "cq" | "cr" | "cu" | "cv" | "cw" | "cx" | "cy" | "cz" | "de" | "dg" | "dj" | "dk" | "dm" | "do" | "dz" | "ea" | "east_african_federation" | "easter_island" | "ec-w" | "ec" | "ee" | "eg" | "eh" | "er" | "es-ar" | "es-ct" | "es-ga" | "es-ib" | "es-ml" | "es-pv" | "es-variant" | "es-vc" | "es" | "et-af" | "et-am" | "et-be" | "et-ga" | "et-ha" | "et-or" | "et-si" | "et-sn" | "et-so" | "et-sw" | "et-ti" | "et" | "eu" | "ewe" | "fi" | "fj" | "fk" | "fm" | "fo" | "fr-20r" | "fr-bre" | "fx" | "ga" | "gb-con" | "gb-eng" | "gb-nir" | "gb-ork" | "gb-sct" | "gb-wls" | "gd" | "ge-ab" | "ge" | "gf" | "gg" | "gh" | "gi" | "gl" | "gm" | "gn" | "gp" | "gq" | "gr" | "gs" | "gt" | "guarani" | "gw" | "gy" | "hausa" | "hm" | "hmong" | "hn" | "hr" | "ht" | "hu" | "ic" | "id-jb" | "id-jt" | "id" | "ie" | "il" | "im" | "in-as" | "in-gj" | "in-ka" | "in-mn" | "in-mz" | "in-or" | "in-tg" | "in-tn" | "in" | "iq-kr" | "iq" | "ir" | "is" | "it-21" | "it-23" | "it-25" | "it-32" | "it-34" | "it-36" | "it-42" | "it-45" | "it-52" | "it-55" | "it-57" | "it-62" | "it-65" | "it-67" | "it-72" | "it-75" | "it-77" | "it-78" | "it-82" | "it-88" | "it" | "je" | "jm" | "jo" | "jp" | "kanuri" | "ke" | "kg" | "kh" | "ki" | "kikuyu" | "km" | "kn" | "kongo" | "kp" | "kr" | "kw" | "ky" | "kz" | "la" | "lb" | "lc" | "li" | "lk" | "lr" | "ls" | "lt" | "lu" | "lv" | "ly" | "ma" | "malayali" | "maori" | "mc" | "me" | "mf" | "mg" | "mh" | "mk" | "ml" | "mm" | "mn" | "mo" | "mq-old" | "mq" | "mr" | "ms" | "mt-civil_ensign" | "mt" | "mu" | "mv" | "mw" | "mx" | "my" | "mz" | "na" | "nc" | "ne" | "nf" | "ng" | "ni" | "nl-fr" | "nl" | "northern_cyprus" | "np" | "nr" | "nu" | "nz" | "occitania" | "om" | "otomi" | "pa" | "pe" | "pf" | "pg" | "ph" | "pk-jk" | "pk-sd" | "pk" | "pl" | "pm" | "pn" | "ps" | "pt-20" | "pt-30" | "pt" | "pw" | "py" | "qa" | "quechua" | "re" | "ro" | "rs" | "ru-ba" | "ru-ce" | "ru-cu" | "ru-da" | "ru-dpr" | "ru-ko" | "ru-lpr" | "ru-ta" | "ru-ud" | "ru" | "rw" | "sa" | "sami" | "sb" | "sc" | "sd" | "se" | "sealand" | "sg" | "sh" | "si" | "sj" | "sk" | "sl" | "sn" | "so" | "somaliland" | "south_ossetia" | "sr" | "ss" | "st" | "su" | "sv" | "sx" | "sy" | "sz" | "ta" | "tc" | "td" | "tf" | "tg" | "th" | "tj" | "tk" | "tl" | "tm" | "tn" | "to" | "tr" | "transnistria" | "tt" | "tv" | "tw" | "tz-zanzibar" | "tz" | "ua-bpr" | "ua-kpr" | "ua" | "ug" | "uk" | "um" | "un" | "us-ak" | "us-al" | "us-ar" | "us-as" | "us-az" | "us-betsy_ross" | "us-ca" | "us-co" | "us-confederate_battle" | "us-dc" | "us-fl" | "us-ga" | "us-gu" | "us-hi" | "us-in" | "us-md" | "us-mn" | "us-mo" | "us-mp" | "us-ms" | "us-nc" | "us-nm" | "us-or" | "us-pr" | "us-ri" | "us-sc" | "us-tn" | "us-tx" | "us-um" | "us-vi" | "us-wa" | "us-wi" | "us-wy" | "uy" | "uz" | "va" | "vc" | "ve" | "vg" | "vn" | "vu" | "wf" | "wiphala" | "ws" | "xk" | "xx" | "ye" | "yorubaland" | "yt" | "yu" | "za" | "zm" | "zw"; ``` Defined in: [core/src/utils.ts:70](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/core/src/utils.ts#L70) ## Parameters [Section titled “Parameters”](#parameters) ### code [Section titled “code”](#code) `string` ### fallback [Section titled “fallback”](#fallback) `"sh-ac"` | `"bq-bo"` | `"no"` | `"hk"` | `"fr-cp"` | `"io"` | `"es-ce"` | `"european_union"` | `"fr"` | `"au"` | `"es-cn"` | `"sh-hl"` | `"soviet_union"` | `"sh-ta"` | `"gb"` | `"us"` | `"as"` | `"gu"` | `"mp"` | `"pr"` | `"vi"` | `"sm"` | `"md"` | `"ac"` | `"ad"` | `"ae"` | `"af-emirate"` | `"af"` | `"ag"` | `"ai"` | `"al"` | `"am"` | `"an"` | `"ao"` | `"aq-true_south"` | `"aq"` | `"ar"` | `"artsakh"` | `"at"` | `"au-aboriginal"` | `"au-act"` | `"au-nsw"` | `"au-nt"` | `"au-qld"` | `"au-sa"` | `"au-tas"` | `"au-torres_strait_islands"` | `"au-vic"` | `"au-wa"` | `"aw"` | `"ax"` | `"az"` | `"ba"` | `"bb"` | `"bd"` | `"be"` | `"bf"` | `"bg"` | `"bh"` | `"bi"` | `"bj"` | `"bl"` | `"bm"` | `"bn"` | `"bo"` | `"bq-sa"` | `"bq-se"` | `"bq"` | `"br"` | `"bs"` | `"bt"` | `"bv"` | `"bw"` | `"by-historical"` | `"by"` | `"bz"` | `"ca-bc"` | `"ca-qc"` | `"ca"` | `"cc"` | `"cd"` | `"cf"` | `"cg"` | `"ch-gr"` | `"ch"` | `"ci"` | `"ck"` | `"cl"` | `"cm"` | `"cn-hk"` | `"cn-xj"` | `"cn-xz"` | `"cn"` | `"co"` | `"cp"` | `"cq"` | `"cr"` | `"cu"` | `"cv"` | `"cw"` | `"cx"` | `"cy"` | `"cz"` | `"de"` | `"dg"` | `"dj"` | `"dk"` | `"dm"` | `"do"` | `"dz"` | `"ea"` | `"east_african_federation"` | `"easter_island"` | `"ec-w"` | `"ec"` | `"ee"` | `"eg"` | `"eh"` | `"er"` | `"es-ar"` | `"es-ct"` | `"es-ga"` | `"es-ib"` | `"es-ml"` | `"es-pv"` | `"es-variant"` | `"es-vc"` | `"es"` | `"et-af"` | `"et-am"` | `"et-be"` | `"et-ga"` | `"et-ha"` | `"et-or"` | `"et-si"` | `"et-sn"` | `"et-so"` | `"et-sw"` | `"et-ti"` | `"et"` | `"eu"` | `"ewe"` | `"fi"` | `"fj"` | `"fk"` | `"fm"` | `"fo"` | `"fr-20r"` | `"fr-bre"` | `"fx"` | `"ga"` | `"gb-con"` | `"gb-eng"` | `"gb-nir"` | `"gb-ork"` | `"gb-sct"` | `"gb-wls"` | `"gd"` | `"ge-ab"` | `"ge"` | `"gf"` | `"gg"` | `"gh"` | `"gi"` | `"gl"` | `"gm"` | `"gn"` | `"gp"` | `"gq"` | `"gr"` | `"gs"` | `"gt"` | `"guarani"` | `"gw"` | `"gy"` | `"hausa"` | `"hm"` | `"hmong"` | `"hn"` | `"hr"` | `"ht"` | `"hu"` | `"ic"` | `"id-jb"` | `"id-jt"` | `"id"` | `"ie"` | `"il"` | `"im"` | `"in-as"` | `"in-gj"` | `"in-ka"` | `"in-mn"` | `"in-mz"` | `"in-or"` | `"in-tg"` | `"in-tn"` | `"in"` | `"iq-kr"` | `"iq"` | `"ir"` | `"is"` | `"it-21"` | `"it-23"` | `"it-25"` | `"it-32"` | `"it-34"` | `"it-36"` | `"it-42"` | `"it-45"` | `"it-52"` | `"it-55"` | `"it-57"` | `"it-62"` | `"it-65"` | `"it-67"` | `"it-72"` | `"it-75"` | `"it-77"` | `"it-78"` | `"it-82"` | `"it-88"` | `"it"` | `"je"` | `"jm"` | `"jo"` | `"jp"` | `"kanuri"` | `"ke"` | `"kg"` | `"kh"` | `"ki"` | `"kikuyu"` | `"km"` | `"kn"` | `"kongo"` | `"kp"` | `"kr"` | `"kw"` | `"ky"` | `"kz"` | `"la"` | `"lb"` | `"lc"` | `"li"` | `"lk"` | `"lr"` | `"ls"` | `"lt"` | `"lu"` | `"lv"` | `"ly"` | `"ma"` | `"malayali"` | `"maori"` | `"mc"` | `"me"` | `"mf"` | `"mg"` | `"mh"` | `"mk"` | `"ml"` | `"mm"` | `"mn"` | `"mo"` | `"mq-old"` | `"mq"` | `"mr"` | `"ms"` | `"mt-civil_ensign"` | `"mt"` | `"mu"` | `"mv"` | `"mw"` | `"mx"` | `"my"` | `"mz"` | `"na"` | `"nc"` | `"ne"` | `"nf"` | `"ng"` | `"ni"` | `"nl-fr"` | `"nl"` | `"northern_cyprus"` | `"np"` | `"nr"` | `"nu"` | `"nz"` | `"occitania"` | `"om"` | `"otomi"` | `"pa"` | `"pe"` | `"pf"` | `"pg"` | `"ph"` | `"pk-jk"` | `"pk-sd"` | `"pk"` | `"pl"` | `"pm"` | `"pn"` | `"ps"` | `"pt-20"` | `"pt-30"` | `"pt"` | `"pw"` | `"py"` | `"qa"` | `"quechua"` | `"re"` | `"ro"` | `"rs"` | `"ru-ba"` | `"ru-ce"` | `"ru-cu"` | `"ru-da"` | `"ru-dpr"` | `"ru-ko"` | `"ru-lpr"` | `"ru-ta"` | `"ru-ud"` | `"ru"` | `"rw"` | `"sa"` | `"sami"` | `"sb"` | `"sc"` | `"sd"` | `"se"` | `"sealand"` | `"sg"` | `"sh"` | `"si"` | `"sj"` | `"sk"` | `"sl"` | `"sn"` | `"so"` | `"somaliland"` | `"south_ossetia"` | `"sr"` | `"ss"` | `"st"` | `"su"` | `"sv"` | `"sx"` | `"sy"` | `"sz"` | `"ta"` | `"tc"` | `"td"` | `"tf"` | `"tg"` | `"th"` | `"tj"` | `"tk"` | `"tl"` | `"tm"` | `"tn"` | `"to"` | `"tr"` | `"transnistria"` | `"tt"` | `"tv"` | `"tw"` | `"tz-zanzibar"` | `"tz"` | `"ua-bpr"` | `"ua-kpr"` | `"ua"` | `"ug"` | `"uk"` | `"um"` | `"un"` | `"us-ak"` | `"us-al"` | `"us-ar"` | `"us-as"` | `"us-az"` | `"us-betsy_ross"` | `"us-ca"` | `"us-co"` | `"us-confederate_battle"` | `"us-dc"` | `"us-fl"` | `"us-ga"` | `"us-gu"` | `"us-hi"` | `"us-in"` | `"us-md"` | `"us-mn"` | `"us-mo"` | `"us-mp"` | `"us-ms"` | `"us-nc"` | `"us-nm"` | `"us-or"` | `"us-pr"` | `"us-ri"` | `"us-sc"` | `"us-tn"` | `"us-tx"` | `"us-um"` | `"us-vi"` | `"us-wa"` | `"us-wi"` | `"us-wy"` | `"uy"` | `"uz"` | `"va"` | `"vc"` | `"ve"` | `"vg"` | `"vn"` | `"vu"` | `"wf"` | `"wiphala"` | `"ws"` | `"xk"` | `"xx"` | `"ye"` | `"yorubaland"` | `"yt"` | `"yu"` | `"za"` | `"zm"` | `"zw"` ## Returns [Section titled “Returns”](#returns) \| `"sh-ac"` | `"bq-bo"` | `"no"` | `"hk"` | `"fr-cp"` | `"io"` | `"es-ce"` | `"european_union"` | `"fr"` | `"au"` | `"es-cn"` | `"sh-hl"` | `"soviet_union"` | `"sh-ta"` | `"gb"` | `"us"` | `"as"` | `"gu"` | `"mp"` | `"pr"` | `"vi"` | `"sm"` | `"md"` | `"ac"` | `"ad"` | `"ae"` | `"af-emirate"` | `"af"` | `"ag"` | `"ai"` | `"al"` | `"am"` | `"an"` | `"ao"` | `"aq-true_south"` | `"aq"` | `"ar"` | `"artsakh"` | `"at"` | `"au-aboriginal"` | `"au-act"` | `"au-nsw"` | `"au-nt"` | `"au-qld"` | `"au-sa"` | `"au-tas"` | `"au-torres_strait_islands"` | `"au-vic"` | `"au-wa"` | `"aw"` | `"ax"` | `"az"` | `"ba"` | `"bb"` | `"bd"` | `"be"` | `"bf"` | `"bg"` | `"bh"` | `"bi"` | `"bj"` | `"bl"` | `"bm"` | `"bn"` | `"bo"` | `"bq-sa"` | `"bq-se"` | `"bq"` | `"br"` | `"bs"` | `"bt"` | `"bv"` | `"bw"` | `"by-historical"` | `"by"` | `"bz"` | `"ca-bc"` | `"ca-qc"` | `"ca"` | `"cc"` | `"cd"` | `"cf"` | `"cg"` | `"ch-gr"` | `"ch"` | `"ci"` | `"ck"` | `"cl"` | `"cm"` | `"cn-hk"` | `"cn-xj"` | `"cn-xz"` | `"cn"` | `"co"` | `"cp"` | `"cq"` | `"cr"` | `"cu"` | `"cv"` | `"cw"` | `"cx"` | `"cy"` | `"cz"` | `"de"` | `"dg"` | `"dj"` | `"dk"` | `"dm"` | `"do"` | `"dz"` | `"ea"` | `"east_african_federation"` | `"easter_island"` | `"ec-w"` | `"ec"` | `"ee"` | `"eg"` | `"eh"` | `"er"` | `"es-ar"` | `"es-ct"` | `"es-ga"` | `"es-ib"` | `"es-ml"` | `"es-pv"` | `"es-variant"` | `"es-vc"` | `"es"` | `"et-af"` | `"et-am"` | `"et-be"` | `"et-ga"` | `"et-ha"` | `"et-or"` | `"et-si"` | `"et-sn"` | `"et-so"` | `"et-sw"` | `"et-ti"` | `"et"` | `"eu"` | `"ewe"` | `"fi"` | `"fj"` | `"fk"` | `"fm"` | `"fo"` | `"fr-20r"` | `"fr-bre"` | `"fx"` | `"ga"` | `"gb-con"` | `"gb-eng"` | `"gb-nir"` | `"gb-ork"` | `"gb-sct"` | `"gb-wls"` | `"gd"` | `"ge-ab"` | `"ge"` | `"gf"` | `"gg"` | `"gh"` | `"gi"` | `"gl"` | `"gm"` | `"gn"` | `"gp"` | `"gq"` | `"gr"` | `"gs"` | `"gt"` | `"guarani"` | `"gw"` | `"gy"` | `"hausa"` | `"hm"` | `"hmong"` | `"hn"` | `"hr"` | `"ht"` | `"hu"` | `"ic"` | `"id-jb"` | `"id-jt"` | `"id"` | `"ie"` | `"il"` | `"im"` | `"in-as"` | `"in-gj"` | `"in-ka"` | `"in-mn"` | `"in-mz"` | `"in-or"` | `"in-tg"` | `"in-tn"` | `"in"` | `"iq-kr"` | `"iq"` | `"ir"` | `"is"` | `"it-21"` | `"it-23"` | `"it-25"` | `"it-32"` | `"it-34"` | `"it-36"` | `"it-42"` | `"it-45"` | `"it-52"` | `"it-55"` | `"it-57"` | `"it-62"` | `"it-65"` | `"it-67"` | `"it-72"` | `"it-75"` | `"it-77"` | `"it-78"` | `"it-82"` | `"it-88"` | `"it"` | `"je"` | `"jm"` | `"jo"` | `"jp"` | `"kanuri"` | `"ke"` | `"kg"` | `"kh"` | `"ki"` | `"kikuyu"` | `"km"` | `"kn"` | `"kongo"` | `"kp"` | `"kr"` | `"kw"` | `"ky"` | `"kz"` | `"la"` | `"lb"` | `"lc"` | `"li"` | `"lk"` | `"lr"` | `"ls"` | `"lt"` | `"lu"` | `"lv"` | `"ly"` | `"ma"` | `"malayali"` | `"maori"` | `"mc"` | `"me"` | `"mf"` | `"mg"` | `"mh"` | `"mk"` | `"ml"` | `"mm"` | `"mn"` | `"mo"` | `"mq-old"` | `"mq"` | `"mr"` | `"ms"` | `"mt-civil_ensign"` | `"mt"` | `"mu"` | `"mv"` | `"mw"` | `"mx"` | `"my"` | `"mz"` | `"na"` | `"nc"` | `"ne"` | `"nf"` | `"ng"` | `"ni"` | `"nl-fr"` | `"nl"` | `"northern_cyprus"` | `"np"` | `"nr"` | `"nu"` | `"nz"` | `"occitania"` | `"om"` | `"otomi"` | `"pa"` | `"pe"` | `"pf"` | `"pg"` | `"ph"` | `"pk-jk"` | `"pk-sd"` | `"pk"` | `"pl"` | `"pm"` | `"pn"` | `"ps"` | `"pt-20"` | `"pt-30"` | `"pt"` | `"pw"` | `"py"` | `"qa"` | `"quechua"` | `"re"` | `"ro"` | `"rs"` | `"ru-ba"` | `"ru-ce"` | `"ru-cu"` | `"ru-da"` | `"ru-dpr"` | `"ru-ko"` | `"ru-lpr"` | `"ru-ta"` | `"ru-ud"` | `"ru"` | `"rw"` | `"sa"` | `"sami"` | `"sb"` | `"sc"` | `"sd"` | `"se"` | `"sealand"` | `"sg"` | `"sh"` | `"si"` | `"sj"` | `"sk"` | `"sl"` | `"sn"` | `"so"` | `"somaliland"` | `"south_ossetia"` | `"sr"` | `"ss"` | `"st"` | `"su"` | `"sv"` | `"sx"` | `"sy"` | `"sz"` | `"ta"` | `"tc"` | `"td"` | `"tf"` | `"tg"` | `"th"` | `"tj"` | `"tk"` | `"tl"` | `"tm"` | `"tn"` | `"to"` | `"tr"` | `"transnistria"` | `"tt"` | `"tv"` | `"tw"` | `"tz-zanzibar"` | `"tz"` | `"ua-bpr"` | `"ua-kpr"` | `"ua"` | `"ug"` | `"uk"` | `"um"` | `"un"` | `"us-ak"` | `"us-al"` | `"us-ar"` | `"us-as"` | `"us-az"` | `"us-betsy_ross"` | `"us-ca"` | `"us-co"` | `"us-confederate_battle"` | `"us-dc"` | `"us-fl"` | `"us-ga"` | `"us-gu"` | `"us-hi"` | `"us-in"` | `"us-md"` | `"us-mn"` | `"us-mo"` | `"us-mp"` | `"us-ms"` | `"us-nc"` | `"us-nm"` | `"us-or"` | `"us-pr"` | `"us-ri"` | `"us-sc"` | `"us-tn"` | `"us-tx"` | `"us-um"` | `"us-vi"` | `"us-wa"` | `"us-wi"` | `"us-wy"` | `"uy"` | `"uz"` | `"va"` | `"vc"` | `"ve"` | `"vg"` | `"vn"` | `"vu"` | `"wf"` | `"wiphala"` | `"ws"` | `"xk"` | `"xx"` | `"ye"` | `"yorubaland"` | `"yt"` | `"yu"` | `"za"` | `"zm"` | `"zw"` # isFlagCode ```ts function isFlagCode(code): code is "sh-ac" | "bq-bo" | "no" | "hk" | "fr-cp" | "io" | "es-ce" | "european_union" | "fr" | "au" | "es-cn" | "sh-hl" | "soviet_union" | "sh-ta" | "gb" | "us" | "as" | "gu" | "mp" | "pr" | "vi" | "sm" | "md" | "ac" | "ad" | "ae" | "af-emirate" | "af" | "ag" | "ai" | "al" | "am" | "an" | "ao" | "aq-true_south" | "aq" | "ar" | "artsakh" | "at" | "au-aboriginal" | "au-act" | "au-nsw" | "au-nt" | "au-qld" | "au-sa" | "au-tas" | "au-torres_strait_islands" | "au-vic" | "au-wa" | "aw" | "ax" | "az" | "ba" | "bb" | "bd" | "be" | "bf" | "bg" | "bh" | "bi" | "bj" | "bl" | "bm" | "bn" | "bo" | "bq-sa" | "bq-se" | "bq" | "br" | "bs" | "bt" | "bv" | "bw" | "by-historical" | "by" | "bz" | "ca-bc" | "ca-qc" | "ca" | "cc" | "cd" | "cf" | "cg" | "ch-gr" | "ch" | "ci" | "ck" | "cl" | "cm" | "cn-hk" | "cn-xj" | "cn-xz" | "cn" | "co" | "cp" | "cq" | "cr" | "cu" | "cv" | "cw" | "cx" | "cy" | "cz" | "de" | "dg" | "dj" | "dk" | "dm" | "do" | "dz" | "ea" | "east_african_federation" | "easter_island" | "ec-w" | "ec" | "ee" | "eg" | "eh" | "er" | "es-ar" | "es-ct" | "es-ga" | "es-ib" | "es-ml" | "es-pv" | "es-variant" | "es-vc" | "es" | "et-af" | "et-am" | "et-be" | "et-ga" | "et-ha" | "et-or" | "et-si" | "et-sn" | "et-so" | "et-sw" | "et-ti" | "et" | "eu" | "ewe" | "fi" | "fj" | "fk" | "fm" | "fo" | "fr-20r" | "fr-bre" | "fx" | "ga" | "gb-con" | "gb-eng" | "gb-nir" | "gb-ork" | "gb-sct" | "gb-wls" | "gd" | "ge-ab" | "ge" | "gf" | "gg" | "gh" | "gi" | "gl" | "gm" | "gn" | "gp" | "gq" | "gr" | "gs" | "gt" | "guarani" | "gw" | "gy" | "hausa" | "hm" | "hmong" | "hn" | "hr" | "ht" | "hu" | "ic" | "id-jb" | "id-jt" | "id" | "ie" | "il" | "im" | "in-as" | "in-gj" | "in-ka" | "in-mn" | "in-mz" | "in-or" | "in-tg" | "in-tn" | "in" | "iq-kr" | "iq" | "ir" | "is" | "it-21" | "it-23" | "it-25" | "it-32" | "it-34" | "it-36" | "it-42" | "it-45" | "it-52" | "it-55" | "it-57" | "it-62" | "it-65" | "it-67" | "it-72" | "it-75" | "it-77" | "it-78" | "it-82" | "it-88" | "it" | "je" | "jm" | "jo" | "jp" | "kanuri" | "ke" | "kg" | "kh" | "ki" | "kikuyu" | "km" | "kn" | "kongo" | "kp" | "kr" | "kw" | "ky" | "kz" | "la" | "lb" | "lc" | "li" | "lk" | "lr" | "ls" | "lt" | "lu" | "lv" | "ly" | "ma" | "malayali" | "maori" | "mc" | "me" | "mf" | "mg" | "mh" | "mk" | "ml" | "mm" | "mn" | "mo" | "mq-old" | "mq" | "mr" | "ms" | "mt-civil_ensign" | "mt" | "mu" | "mv" | "mw" | "mx" | "my" | "mz" | "na" | "nc" | "ne" | "nf" | "ng" | "ni" | "nl-fr" | "nl" | "northern_cyprus" | "np" | "nr" | "nu" | "nz" | "occitania" | "om" | "otomi" | "pa" | "pe" | "pf" | "pg" | "ph" | "pk-jk" | "pk-sd" | "pk" | "pl" | "pm" | "pn" | "ps" | "pt-20" | "pt-30" | "pt" | "pw" | "py" | "qa" | "quechua" | "re" | "ro" | "rs" | "ru-ba" | "ru-ce" | "ru-cu" | "ru-da" | "ru-dpr" | "ru-ko" | "ru-lpr" | "ru-ta" | "ru-ud" | "ru" | "rw" | "sa" | "sami" | "sb" | "sc" | "sd" | "se" | "sealand" | "sg" | "sh" | "si" | "sj" | "sk" | "sl" | "sn" | "so" | "somaliland" | "south_ossetia" | "sr" | "ss" | "st" | "su" | "sv" | "sx" | "sy" | "sz" | "ta" | "tc" | "td" | "tf" | "tg" | "th" | "tj" | "tk" | "tl" | "tm" | "tn" | "to" | "tr" | "transnistria" | "tt" | "tv" | "tw" | "tz-zanzibar" | "tz" | "ua-bpr" | "ua-kpr" | "ua" | "ug" | "uk" | "um" | "un" | "us-ak" | "us-al" | "us-ar" | "us-as" | "us-az" | "us-betsy_ross" | "us-ca" | "us-co" | "us-confederate_battle" | "us-dc" | "us-fl" | "us-ga" | "us-gu" | "us-hi" | "us-in" | "us-md" | "us-mn" | "us-mo" | "us-mp" | "us-ms" | "us-nc" | "us-nm" | "us-or" | "us-pr" | "us-ri" | "us-sc" | "us-tn" | "us-tx" | "us-um" | "us-vi" | "us-wa" | "us-wi" | "us-wy" | "uy" | "uz" | "va" | "vc" | "ve" | "vg" | "vn" | "vu" | "wf" | "wiphala" | "ws" | "xk" | "xx" | "ye" | "yorubaland" | "yt" | "yu" | "za" | "zm" | "zw"; ``` Defined in: [core/src/utils.ts:64](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/core/src/utils.ts#L64) ## Parameters [Section titled “Parameters”](#parameters) ### code [Section titled “code”](#code) `string` ## Returns [Section titled “Returns”](#returns) code is “sh-ac” | “bq-bo” | “no” | “hk” | “fr-cp” | “io” | “es-ce” | “european\_union” | “fr” | “au” | “es-cn” | “sh-hl” | “soviet\_union” | “sh-ta” | “gb” | “us” | “as” | “gu” | “mp” | “pr” | “vi” | “sm” | “md” | “ac” | “ad” | “ae” | “af-emirate” | “af” | “ag” | “ai” | “al” | “am” | “an” | “ao” | “aq-true\_south” | “aq” | “ar” | “artsakh” | “at” | “au-aboriginal” | “au-act” | “au-nsw” | “au-nt” | “au-qld” | “au-sa” | “au-tas” | “au-torres\_strait\_islands” | “au-vic” | “au-wa” | “aw” | “ax” | “az” | “ba” | “bb” | “bd” | “be” | “bf” | “bg” | “bh” | “bi” | “bj” | “bl” | “bm” | “bn” | “bo” | “bq-sa” | “bq-se” | “bq” | “br” | “bs” | “bt” | “bv” | “bw” | “by-historical” | “by” | “bz” | “ca-bc” | “ca-qc” | “ca” | “cc” | “cd” | “cf” | “cg” | “ch-gr” | “ch” | “ci” | “ck” | “cl” | “cm” | “cn-hk” | “cn-xj” | “cn-xz” | “cn” | “co” | “cp” | “cq” | “cr” | “cu” | “cv” | “cw” | “cx” | “cy” | “cz” | “de” | “dg” | “dj” | “dk” | “dm” | “do” | “dz” | “ea” | “east\_african\_federation” | “easter\_island” | “ec-w” | “ec” | “ee” | “eg” | “eh” | “er” | “es-ar” | “es-ct” | “es-ga” | “es-ib” | “es-ml” | “es-pv” | “es-variant” | “es-vc” | “es” | “et-af” | “et-am” | “et-be” | “et-ga” | “et-ha” | “et-or” | “et-si” | “et-sn” | “et-so” | “et-sw” | “et-ti” | “et” | “eu” | “ewe” | “fi” | “fj” | “fk” | “fm” | “fo” | “fr-20r” | “fr-bre” | “fx” | “ga” | “gb-con” | “gb-eng” | “gb-nir” | “gb-ork” | “gb-sct” | “gb-wls” | “gd” | “ge-ab” | “ge” | “gf” | “gg” | “gh” | “gi” | “gl” | “gm” | “gn” | “gp” | “gq” | “gr” | “gs” | “gt” | “guarani” | “gw” | “gy” | “hausa” | “hm” | “hmong” | “hn” | “hr” | “ht” | “hu” | “ic” | “id-jb” | “id-jt” | “id” | “ie” | “il” | “im” | “in-as” | “in-gj” | “in-ka” | “in-mn” | “in-mz” | “in-or” | “in-tg” | “in-tn” | “in” | “iq-kr” | “iq” | “ir” | “is” | “it-21” | “it-23” | “it-25” | “it-32” | “it-34” | “it-36” | “it-42” | “it-45” | “it-52” | “it-55” | “it-57” | “it-62” | “it-65” | “it-67” | “it-72” | “it-75” | “it-77” | “it-78” | “it-82” | “it-88” | “it” | “je” | “jm” | “jo” | “jp” | “kanuri” | “ke” | “kg” | “kh” | “ki” | “kikuyu” | “km” | “kn” | “kongo” | “kp” | “kr” | “kw” | “ky” | “kz” | “la” | “lb” | “lc” | “li” | “lk” | “lr” | “ls” | “lt” | “lu” | “lv” | “ly” | “ma” | “malayali” | “maori” | “mc” | “me” | “mf” | “mg” | “mh” | “mk” | “ml” | “mm” | “mn” | “mo” | “mq-old” | “mq” | “mr” | “ms” | “mt-civil\_ensign” | “mt” | “mu” | “mv” | “mw” | “mx” | “my” | “mz” | “na” | “nc” | “ne” | “nf” | “ng” | “ni” | “nl-fr” | “nl” | “northern\_cyprus” | “np” | “nr” | “nu” | “nz” | “occitania” | “om” | “otomi” | “pa” | “pe” | “pf” | “pg” | “ph” | “pk-jk” | “pk-sd” | “pk” | “pl” | “pm” | “pn” | “ps” | “pt-20” | “pt-30” | “pt” | “pw” | “py” | “qa” | “quechua” | “re” | “ro” | “rs” | “ru-ba” | “ru-ce” | “ru-cu” | “ru-da” | “ru-dpr” | “ru-ko” | “ru-lpr” | “ru-ta” | “ru-ud” | “ru” | “rw” | “sa” | “sami” | “sb” | “sc” | “sd” | “se” | “sealand” | “sg” | “sh” | “si” | “sj” | “sk” | “sl” | “sn” | “so” | “somaliland” | “south\_ossetia” | “sr” | “ss” | “st” | “su” | “sv” | “sx” | “sy” | “sz” | “ta” | “tc” | “td” | “tf” | “tg” | “th” | “tj” | “tk” | “tl” | “tm” | “tn” | “to” | “tr” | “transnistria” | “tt” | “tv” | “tw” | “tz-zanzibar” | “tz” | “ua-bpr” | “ua-kpr” | “ua” | “ug” | “uk” | “um” | “un” | “us-ak” | “us-al” | “us-ar” | “us-as” | “us-az” | “us-betsy\_ross” | “us-ca” | “us-co” | “us-confederate\_battle” | “us-dc” | “us-fl” | “us-ga” | “us-gu” | “us-hi” | “us-in” | “us-md” | “us-mn” | “us-mo” | “us-mp” | “us-ms” | “us-nc” | “us-nm” | “us-or” | “us-pr” | “us-ri” | “us-sc” | “us-tn” | “us-tx” | “us-um” | “us-vi” | “us-wa” | “us-wi” | “us-wy” | “uy” | “uz” | “va” | “vc” | “ve” | “vg” | “vn” | “vu” | “wf” | “wiphala” | “ws” | “xk” | “xx” | “ye” | “yorubaland” | “yt” | “yu” | “za” | “zm” | “zw” # BuildMeta Defined in: [react/src/meta.ts:3](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/meta.ts#L3) ## Properties [Section titled “Properties”](#properties) ### builtTimestamp [Section titled “builtTimestamp”](#builttimestamp) ```ts builtTimestamp: number; ``` Defined in: [react/src/meta.ts:7](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/meta.ts#L7) *** ### circleFlagsCommitHash [Section titled “circleFlagsCommitHash”](#circleflagscommithash) ```ts circleFlagsCommitHash: string; ``` Defined in: [react/src/meta.ts:6](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/meta.ts#L6) *** ### commitHash [Section titled “commitHash”](#commithash) ```ts commitHash: string; ``` Defined in: [react/src/meta.ts:5](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/meta.ts#L5) *** ### version [Section titled “version”](#version) ```ts version: string; ``` Defined in: [react/src/meta.ts:4](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/meta.ts#L4) # CircleFlagProps Defined in: [react/src/circle-flag.tsx:62](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/circle-flag.tsx#L62) Deprecated `CircleFlag` is deprecated and not recommended for new code. It fetches SVG at runtime and renders a wrapper with injected SVG HTML, so many SVG-only props won’t apply. Prefer `named imports` or `DynamicFlag` instead. Read more: ## Extends [Section titled “Extends”](#extends) * `Omit`<[`FlagComponentProps`](/reference/api/interfaceflagcomponentprops/), `"title"`> ## Properties [Section titled “Properties”](#properties) ### ~~cdnUrl?~~ [Section titled “cdnUrl?”](#cdnurl) ```ts optional cdnUrl: string; ``` Defined in: [react/src/circle-flag.tsx:66](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/circle-flag.tsx#L66) *** ### ~~code?~~ [Section titled “code?”](#code) ```ts optional code: string; ``` Defined in: [react/src/circle-flag.tsx:65](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/circle-flag.tsx#L65) Deprecated Use ‘countryCode’ instead *** ### ~~countryCode?~~ [Section titled “countryCode?”](#countrycode) ```ts optional countryCode: string; ``` Defined in: [react/src/circle-flag.tsx:63](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/circle-flag.tsx#L63) *** ### ~~title?~~ [Section titled “title?”](#title) ```ts optional title: string; ``` Defined in: [react/src/circle-flag.tsx:67](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/circle-flag.tsx#L67) # FlagComponentProps Defined in: [react/src/flag-props.ts:4](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/flag-props.ts#L4) ## Extends [Section titled “Extends”](#extends) * `SVGProps`<`SVGSVGElement`>.`FlagComponentProps` ## Properties [Section titled “Properties”](#properties) ### title? [Section titled “title?”](#title) ```ts optional title: string; ``` Defined in: [core/src/types.ts:13](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/core/src/types.ts#L13) Accessible title for screen readers #### Inherited from [Section titled “Inherited from”](#inherited-from) ```ts CoreFlagComponentProps.title ``` # @sankyu/react-circle-flags API Reference for @sankyu/react-circle-flags ## Interfaces [Section titled “Interfaces”](#interfaces) | Interface | Description | | ----------------------------------------------------------------- | ----------- | | [BuildMeta](/reference/api/interfacebuildmeta/) | - | | [~~CircleFlagProps~~](/reference/api/interfacecircleflagprops/) | - | | [FlagComponentProps](/reference/api/interfaceflagcomponentprops/) | - | ## Type Aliases [Section titled “Type Aliases”](#type-aliases) | Type Alias | Description | | ------------------------------------------------------------- | ----------- | | [CountryCode](/reference/api/typealiascountrycode/) | - | | [DynamicFlagProps](/reference/api/typealiasdynamicflagprops/) | - | | [FlagCode](/reference/api/typealiasflagcode/) | - | ## Variables [Section titled “Variables”](#variables) | Variable | Description | | ---------------------------------------------- | ------------------- | | [FlagSizes](/reference/api/variableflagsizes/) | Standard flag sizes | | [FlagUtils](/reference/api/variableflagutils/) | - | ## Functions [Section titled “Functions”](#functions) | Function | Description | | -------------------------------------------------------- | ----------- | | [coerceFlagCode](/reference/api/functioncoerceflagcode/) | - | | [isFlagCode](/reference/api/functionisflagcode/) | - | # CountryCode ```ts type CountryCode = FlagCode; ``` Defined in: [react/src/dynamic-flag.tsx:8](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/dynamic-flag.tsx#L8) # DynamicFlagProps ```ts type DynamicFlagProps = | DynamicFlagPropsBase & { code: string; strict?: false; } | DynamicFlagPropsBase & { code: CountryCode; strict: true; }; ``` Defined in: [react/src/dynamic-flag.tsx:15](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/dynamic-flag.tsx#L15) # FlagCode ```ts type FlagCode = keyof typeof FLAG_REGISTRY; ``` Defined in: core/src/generated/registry.ts:460 # FlagSizes ```ts const FlagSizes: { lg: 48; md: 32; sm: 24; xl: 64; xs: 16; xxl: 96; xxxl: 128; }; ``` Defined in: [core/src/utils.ts:43](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/core/src/utils.ts#L43) Standard flag sizes ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### lg [Section titled “lg”](#lg) ```ts readonly lg: 48 = 48; ``` ### md [Section titled “md”](#md) ```ts readonly md: 32 = 32; ``` ### sm [Section titled “sm”](#sm) ```ts readonly sm: 24 = 24; ``` ### xl [Section titled “xl”](#xl) ```ts readonly xl: 64 = 64; ``` ### xs [Section titled “xs”](#xs) ```ts readonly xs: 16 = 16; ``` ### xxl [Section titled “xxl”](#xxl) ```ts readonly xxl: 96 = 96; ``` ### xxxl [Section titled “xxxl”](#xxxl) ```ts readonly xxxl: 128 = 128; ``` # FlagUtils ```ts const FlagUtils: { formatCountryCode: (code) => string; getComponentName: (code) => string; getSizeName: (pixels) => FlagSizeName | null; isValidCountryCode: (code) => boolean; sizes: typeof FlagSizes; }; ``` Defined in: [react/src/flag-utils.ts:12](https://github.com/SanKyu-Lab/circle-flags-ui/blob/main/packages/react/src/flag-utils.ts#L12) ## Type Declaration [Section titled “Type Declaration”](#type-declaration) ### formatCountryCode() [Section titled “formatCountryCode()”](#formatcountrycode) ```ts formatCountryCode: (code) => string; ``` #### Parameters [Section titled “Parameters”](#parameters) ##### code [Section titled “code”](#code) `string` #### Returns [Section titled “Returns”](#returns) `string` ### getComponentName() [Section titled “getComponentName()”](#getcomponentname) ```ts getComponentName: (code) => string; ``` #### Parameters [Section titled “Parameters”](#parameters-1) ##### code [Section titled “code”](#code-1) `string` #### Returns [Section titled “Returns”](#returns-1) `string` ### getSizeName() [Section titled “getSizeName()”](#getsizename) ```ts getSizeName: (pixels) => FlagSizeName | null; ``` #### Parameters [Section titled “Parameters”](#parameters-2) ##### pixels [Section titled “pixels”](#pixels) `number` #### Returns [Section titled “Returns”](#returns-2) `FlagSizeName` | `null` ### isValidCountryCode() [Section titled “isValidCountryCode()”](#isvalidcountrycode) ```ts isValidCountryCode: (code) => boolean; ``` #### Parameters [Section titled “Parameters”](#parameters-3) ##### code [Section titled “code”](#code-2) `string` #### Returns [Section titled “Returns”](#returns-3) `boolean` ### sizes [Section titled “sizes”](#sizes) ```ts sizes: typeof FlagSizes; ```