A collection of all country flags in SVG — plus the CSS for easier integration. See the demo.
You can either download the whole project as is or install it via Bower or NPM:
$ bower install flag-icon-css
$ npm install flag-icon-css
For using the flags inline with text add the classes .flag-icon
and
.flag-icon-xx
(where xx
is the
ISO 3166-1-alpha-2 code
of a country) to an empty <span>
. If you want to have a squared version flag
then add the class flag-icon-squared
as well. Example:
<span class="flag-icon flag-icon-gr"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared"></span>
You could also apply this to any element, but in that case you'll have to use the
flag-icon-background
instead of flag-icon
and you're set. This will add the
correct background with the following CSS properties:
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
Which means that the flag is just going to appear in the middle of an element, so
you will have to set manually the correct size of 4 by 3 ratio or if it's squared
add also the flag-icon-squared
class.
Run the npm install
to install the dependencies after cloning the project and
you'll be able to:
To watch for changes and live reload if served
$ grunt
To build *.less
files
$ grunt build
To serve it on localhost:8000
$ grunt connect
<template>
<span v-if="iso" class="flag-icon" :class="flagIconClass" :title="title || iso"></span>
</template>
<script>
export default {
name: 'flag',
props: {
iso: {type: String, default: null},
title: {type: String, default: null},
squared: {type: Boolean, default: false},
},
computed: {
flagIconClass() {
return ((!!this.squared) ? 'flag-icon-squared ' : '') + 'flag-icon-' + this.iso.toLowerCase();
}
}
}
</script>
<style lang="scss">
$flag-icon-css-include: 'nl', 'be', 'de', 'gr', 'it';
$flag-icon-css-path: '~flag-icon-css/flags';
@import '~flag-icon-css/sass/flag-icon.scss';
</style>
Taken from https://github.com/vikkio88/vue-flag-icon
To have only specific countries in the css file, remove the ones that you don't
need from the
flag-icon-list.less
file and build it again.
This project wouldn't exist without the awesome and now deleted collection of SVG flags by koppi.