Vue-Flag-Icon
a Vue2 Compoment for flag-icon
Install
npm i --save vue-flag-icon
Usage
Just declare the global Compoment with the use directive in your app
import FlagIcon from 'vue-flag-icon'
Vue.use(FlagIcon);
Then to use it
<template>
<div>
...
<flag iso="it" />
<flag iso="gb" />
<flag iso="us" />
...
</div>
</template
To see a full set of all the icons and countries iso codes visit the flag-icon-css website. There are 246 different icons there.
Being svg files they are resizable as long as you set the font size accordingly in a wrapper element
<div style="font-size:180px">
<flag iso="it" />
</div>
The property iso can be as well dynamically set from an object
let guy = {
name: "Vincenzo",
nationality: "it"
}
in the Compoment you should dynamically bind the value
<flag :iso="guy.nationality" />
Screenshot
Code Example
(it is the basic vue-cli webpack template)
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<flag iso="it" />
<flag iso="gb" />
<flag iso="us" />
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Additional Props
From 1.0.4 you can now specify two different properties:
- squared : it will render the flag as a square if true, otherwise the flag will be rectangular shaped (true by default).
- title : you can specify the title of the flag icon, (by default it will be overwritten by the iso)