Flags
Vue Bootstrap 5 Flags
A flag is used to represent a political state.
Definition
Flag
A flag can use the two digit country code, the full name, or a common alias
<template>
<MDBIcon flag="ae" />
<MDBIcon flag="fr" />
<MDBIcon flag="mm" />
</template>
<script>
import { MDBIcon } from 'mdb-vue-ui-kit';
export default {
components: {
MDBIcon,
},
};
</script>
<script setup lang="ts">
import { MDBIcon } from 'mdb-vue-ui-kit';
</script>
Types
Many flag sets use SVG to render flags at multiple sizes. However svg flags usually appear blurry or render improperly at smaller sizes. MDB default theme uses an image sprite solution which provides crisper icons, but without the ability to resize
United States
Selected Flag
<i class="flag flag-united-states"></i>
Flag | Name | ISO 3166-2 Code ? | Additional Aliases |
---|
Flags - API
Import
<script>
import { MDBIcon } from 'mdb-vue-ui-kit';
</script>
Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
icon
|
String | '' |
Defines icon. |
<MDBIcon icon="camera" />
|
iconStyle
|
String | 'fas' |
Defines icon style. Available options: fas , far ,
fab , fal , fad .
|
<MDBIcon icon="mdb" iconStyle="fab" />
|
size
|
String | '' |
Defines icon size. |
<MDBIcon icon="camera" size="3x" />
|
flag
|
String | '' |
Changes icon to a flag. |
<MDBIcon flag="fr" />
|