v-flag-icons

Vue Flag Icons

Use country flags as a Vue component. You can also use in any project without Vue.

This project is under active development. Any feedback or contributions would be appreciated.

Get Started

Please read simple documentation to get started.

Quick Start

To install this package run the NPM command:

npm i v-flag-icons

• Import vFlagIcons as a global component in main.js:

import vFlagIcons from 'v-flag-icons'
import 'v-flag-icons/css/rectangular.min.css'
 
Vue.use(vFlagIcons)

Now call in component like this:

<vf-icon country="bd"/>

• Import vFlagIcons in a specific component:

import vFlagIcons from 'v-flag-icons'
import 'v-flag-icons/css/rectangular.min.css'
 
new Vue({
    components: {
        vFlagIcons
    }
})

Now call in component like this:

<vFlagIcons country="bd"/>

More Options

Read our documentation to see all features and usage such as:

• Design Set 1:

<vf-icon country="bd"/> <!-- default is rectangular -->
<vf-icon country="bd" type="square"/>
<vf-icon country="bd" type="hexagonal"/>
<vf-icon country="bd" type="rounded-square"/>
<vf-icon country="bd" type="rounded-rectangle"/>
<vf-icon country="bd" type="mast"/>

• Design Set 2:

<vf-icon country="bd" design="ds2"/>  <!-- default is rectangular -->
<vf-icon country="bd" type="square" design="ds2"/>
<vf-icon country="bd" type="hexagonal" design="ds2"/>
<vf-icon country="bd" type="rounded-square" design="ds2"/>
<vf-icon country="bd" type="rounded-rectangle" design="ds2"/>
<vf-icon country="bd" type="mast" design="ds2"/>

Credits

The awesome flag icons are created by Freepik.

License

The package is under the MIT License but the flag icons aren't free. You can use all icons for free with attribution. Please check the flag icons provider's Free License terms and conditions. If you don't like to use icons with attribution, then please buy membership.

Note

This package helps you to use Flaticon's flag icons easily. If you have any questions please contact me.

Thank you for using Vue Flag Icons. ❤️