vuejs-flag-icons 🚩

A lightweight, high-performance Vue 3 wrapper for flag-icons. Easily integrate beautiful, scalable country flags into your Vue projects with full TypeScript support.

✨ Features

• 🚀 Simple Integration: Get up and running in seconds.
• 🎨 Custom Sizing: Pass any valid CSS size (px, rem, em, etc.).
• 💪 TypeScript Powered: Enjoy autocompletion and type safety.
• 📦 Zero Configuration: Works out of the box with Vite, Webpack, and more.

🚀 Installation

Add it to your project via your preferred package manager:

# Using npm
npm install vuejs-flag-icons

# Using yarn
yarn add vuejs-flag-icons

# Using pnpm
pnpm add vuejs-flag-icons

🛠 Usage

1. Global Setup (Recommended)

Register the plugin in your main entry file (e.g., main.ts or main.js) to use it anywhere:

import { createApp } from 'vue';
import App from './App.vue';
import FlagIcon from 'vuejs-flag-icons';

// Import the essential styles
import 'vuejs-flag-icons/dist/style.css';

const app = createApp(App);
app.use(FlagIcon);
app.mount('#app');

Then use it in your components like this:

<template>
  <div class="flex items-center gap-4">
    <!-- Default size -->
    <FlagIcon code="us" />
    
    <!-- Custom pixel size -->
    <FlagIcon code="tr" size="32" />
    
    <!-- Custom CSS units -->
    <FlagIcon code="gb" size="2.5rem" />
  </div>
</template>

2. Local Usage

If you prefer to keep your bundle clean, you can import it only where you need it:

<script setup>
import { FlagIcon } from 'vuejs-flag-icons';
import 'vuejs-flag-icons/dist/style.css';
</script>

<template>
  <FlagIcon code="fr" :size="24" />
</template>

⚙️ Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | code | string | Required | ISO 3166-1 alpha-2 country code (e.g., us, tr, de, fr). | | size | number \| string | undefined | The icon size. Can be a number (px) or a string (e.g., '16', '2rem', '40px'). |

💡 Pro Tips

• Inherited Styles: If you don't provide a size, the flag will automatically match the font-size of its parent element.
• Performance: The library includes the optimized CSS from flag-icons, ensuring sharp icons without the overhead of SVG loading.

📄 License

This project is licensed under the MIT License.