Vue-Flag-Icon
a Vue2 Compoment for flag-icon-css
Install
npm i --save vue-flag-icon
Usage
Just declare the global Compoment with the use directive in your app
Vue;
Then to use it
... ...
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
The property iso can be as well dinamically set from an object
let guy = name: "Vincenzo" nationality: "it"
in the Compoment you should dinamically bind the value
Screenshot
Code Example
(it is the basic vue-cli webpack template)
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)