Negligible Psychological Misery

    vue-flag-icon-2

    1.0.8 • Public • Published

    Vue-Flag-Icon

    NPM

    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

    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 dinamically set from an object

    let guy = {
        name: "Vincenzo",
        nationality: "it"
    }

    in the Compoment you should dinamically 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'HelveticaArialsans-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)

    Result

    image

    Install

    npm i vue-flag-icon-2

    DownloadsWeekly Downloads

    45

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    3.78 kB

    Total Files

    6

    Last publish

    Collaborators

    • parweb