Use Outside of Vue

You're able to use our package to any project. To use outside of Vue, you need to do follow these simple steps.

Add to Any Project

• Add any CDN of CSS:

<!-- styles : production version -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/v-flag-icons/css/rectangular.min.css">

• Add this CSS in your project:

<style>
.vf-icon,
.vf-icon-background {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}
.vf-icon {
    position: relative;
    display: inline-block;
    width: 1em;
    overflow: visible
}
.vf-icon:before {
    content: "\00a0"
}
</style>

• Now display flag icon like this:

<span class="vf-icon vf-icon-bd"></span>

More Options

Just import any design set's style and call like this:

Design Set 1:

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

Design Set 2:

<span class="vf-icon vf-icon-bd-ds2"></span> <!-- default is rectangular -->
<span class="vf-icon vf-icon-bd-square-ds2"></span>
<span class="vf-icon vf-icon-bd-hexagonal-ds2"></span>
<span class="vf-icon vf-icon-bd-mast-ds2"></span>
<span class="vf-icon vf-icon-bd-rounded-rectangle-ds2"></span>
<span class="vf-icon vf-icon-bd-rounded-square-ds2"></span>

Have a look at the complete demo project (Outside of Vue): https://codepen.io/obydul/pen/gObbQrK