@tabler/flags-vue
@tabler/flags-vue
Country flags as Vue 3 components — one tree-shakable component per flag (plus an ISO alias), and a dynamic lookup by slug or ISO code for data-driven lists.
Pre-1.0. API may still change.
Install
pnpm add @tabler/flags-vue vue
Usage
<script setup>
import { FlagPoland, Flag, flagsList } from '@tabler/flags-vue';
</script>
<template>
<FlagPoland variant="plain" :size="32" />
<Flag name="pl" />
<Flag v-for="slug in flagsList" :key="slug" :name="slug" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
'rounded' | 'plain' | 'gradient' | 'shiny' |
'rounded' |
Which pre-baked visual variant to render. |
size |
string | number |
24 |
Sets the SVG height. Width is derived from the fixed 5:4 aspect ratio, unless you also pass an explicit width. |
title |
string |
— | Adds an accessible <title> element inside the SVG. |
| ...attrs | SVGAttributes |
— | Any other SVG attribute (class, style, @click, ...) is forwarded to the root <svg>. |
The dynamic Flag component additionally requires name: a slug ("poland") or lowercase ISO 3166-1 alpha-2 code ("pl").
The full list of flags, slugs and component names is in the repository README.
License
tabler-flags is licensed under the MIT License.
Related Packages
@iconoir/vue
Vue library for Iconoir, the biggest open source icon library with tons of free...
56,973
4,600
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.1.1 | >=3.0.1 | MIT | |
| 0.1.0 | >=3.0.1 | MIT | |
| 0.0.3 | >=3.0.1 | ||
| 0.0.2 | >=3.0.1 | ||
| 0.0.1 | >=3.0.1 |