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="">
  • Add this CSS in your project:
.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"
  • 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):

Last Updated: 12/4/2019, 7:23:46 PM