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