400+ Flags
Comprehensive collection of country, territory, subdivision, and organization flags.
Getting Started
Welcome to @sankyu/react-circle-flags, a modern React library for circular flag components.
📖 Overview
Section titled “📖 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.
🚀 Quick start
Section titled “🚀 Quick start”Follow these guides to master the library:
1. 📦 Installation Add the package to your project with your preferred package manager
2. 📚 Basic Usage Learn how to import and render flag components
3. 🎨 Styling Customize flags with Tailwind, CSS modules, or styled-components
4. 🌀 Dynamic Flags Render flags based on runtime country codes
5. 🧑💻 TypeScript Leverage full type safety and autocomplete
6. 📄 Bundle Size Optimize your bundle with tree-shaking best practices
✨ Key Features
Section titled “✨ Key Features”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, Remix, Astro, and other SSR frameworks.
Inline SVG
No external requests — flags are embedded as React components.
Standard Props
Accepts all standard SVG properties for easy customization.
At a glance
Section titled “At a glance”Modern Architecture
- ESM + CJS dual format
- Tree-shaking friendly
- Minified production builds
Developer Experience
- Full TypeScript definitions
- Consistent naming pattern
- Standard React SVG props
Framework Support
- Next.js (App Router & Pages)
- Remix
- Vite
- …and more!
Performance
- No external HTTP requests
- Inline SVG for rendering
- Tiny per-flag size (~1-2 KB)
What’s next?
Section titled “What’s next?”Ready to dive in? Start with Installation to add the library to your project.