diff --git a/dist/vue-flag-rollup.cjs.js b/dist/vue-flag-rollup.cjs.js
index eded262..afc7333 100644
--- a/dist/vue-flag-rollup.cjs.js
+++ b/dist/vue-flag-rollup.cjs.js
@@ -21,7 +21,7 @@ var script = {
   name: 'Flag',
   methods: {
     getUrl(size, code) {
-      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
+      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
     }
   },
   props: {
@@ -218,11 +218,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-5b7ed2d6_0", { source: ".flag[data-v-5b7ed2d6] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-5b7ed2d6] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5b7ed2d6] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5b7ed2d6] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5b7ed2d6] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5b7ed2d6] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+    inject("data-v-48c48677_0", { source: ".flag[data-v-48c48677] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-48c48677] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-48c48677] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-48c48677] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-48c48677] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-48c48677] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-48c48677] {\n  border-radius: 2px;\n}\n.flag.border[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-48c48677] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-5b7ed2d6";
+  const __vue_scope_id__ = "data-v-48c48677";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -246,8 +246,8 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-module.exports = {
-  install: function install(Vue, options) {
+module.exports = __vue_component__;
+module.exports.install = function install(Vue, options) {
     Vue.component(options.name || 'vue-flagpack', __vue_component__);
-  }
-};
+  };
+module.exports.Flag = __vue_component__;
diff --git a/dist/vue-flag-rollup.esm.js b/dist/vue-flag-rollup.esm.js
index 74bc3c1..53c863c 100644
--- a/dist/vue-flag-rollup.esm.js
+++ b/dist/vue-flag-rollup.esm.js
@@ -19,7 +19,7 @@ var script = {
   name: 'Flag',
   methods: {
     getUrl(size, code) {
-      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
+      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
     }
   },
   props: {
@@ -216,11 +216,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-5b7ed2d6_0", { source: ".flag[data-v-5b7ed2d6] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-5b7ed2d6] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5b7ed2d6] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5b7ed2d6] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5b7ed2d6] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5b7ed2d6] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+    inject("data-v-48c48677_0", { source: ".flag[data-v-48c48677] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-48c48677] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-48c48677] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-48c48677] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-48c48677] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-48c48677] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-48c48677] {\n  border-radius: 2px;\n}\n.flag.border[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-48c48677] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-5b7ed2d6";
+  const __vue_scope_id__ = "data-v-48c48677";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -244,8 +244,8 @@ __vue_render__._withStripped = true;
     undefined
   );
 
-module.exports = {
-  install: function install(Vue, options) {
+module.exports = __vue_component__;
+module.exports.install = function install(Vue, options) {
     Vue.component(options.name || 'vue-flagpack', __vue_component__);
-  }
-};
+  };
+module.exports.Flag = __vue_component__;
diff --git a/dist/vue-flag-rollup.iife.js b/dist/vue-flag-rollup.iife.js
index 686b273..8fa25cd 100644
--- a/dist/vue-flag-rollup.iife.js
+++ b/dist/vue-flag-rollup.iife.js
@@ -22,7 +22,7 @@
     name: 'Flag',
     methods: {
       getUrl(size, code) {
-        return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
+        return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
       }
     },
     props: {
@@ -219,11 +219,11 @@
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-5b7ed2d6_0", { source: ".flag[data-v-5b7ed2d6] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-5b7ed2d6] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-5b7ed2d6] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-5b7ed2d6] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-5b7ed2d6] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-5b7ed2d6] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-5b7ed2d6] {\n  border-radius: 2px;\n}\n.flag.border[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-5b7ed2d6]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-5b7ed2d6] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
+      inject("data-v-48c48677_0", { source: ".flag[data-v-48c48677] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-48c48677] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-48c48677] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-48c48677] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-48c48677] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-48c48677] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-48c48677] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-48c48677] {\n  border-radius: 2px;\n}\n.flag.border[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular[data-v-48c48677]::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img[data-v-48c48677] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */", map: {"version":3,"sources":["C:\\Users\\daone\\Documents\\yummygum\\vue-flagpack\\src\\Flag.vue","Flag.vue"],"names":[],"mappings":"AAwEA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;ACvEA;AD0EA;EACA,WAAA;EACA,YAAA;ACxEA;AD0EA;EACA,4CAAA;ACxEA;AD2EA;EACA,kBAAA;ACzEA;AD6EA;EACA,WAAA;EACA,YAAA;AC3EA;AD6EA;EACA,0CAAA;AC3EA;AD8EA;EACA,oBAAA;AC5EA;ADgFA;EACA,WAAA;EACA,YAAA;AC9EA;ADgFA;EACA,0CAAA;AC9EA;ADiFA;EACA,kBAAA;AC/EA;ADqFA;EAzDA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAqDA,oCAAA;EACA,uBAAA;AC7EA;ADkFA;EAjEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA6DA,kBAAA;AC1EA;AD+EA;EAxEA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAoEA,6FAAA;ACvEA;AD4EA;EA/EA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EA2EA,kQAAA;ACpEA;ADyEA;EAtFA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,uBAAA;EACA,sBAAA;EAkFA,ygBAAA;ACjEA;ADsEA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;ACpEA;;AAEA,mCAAmC","file":"Flag.vue","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'flag',\n      `size-${size.toLowerCase()}`,\n      {'border-radius': hasBorderRadius },\n      {'border': hasBorder },\n      {'drop-shadow': hasDropShadow},\n      gradient,\n      className\n    ]\">\n    <img :src=\"getUrl(size, code)\">\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: 'Flag',\n  methods: {\n    getUrl(size, code) {\n      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)\n    }\n  },\n  props: {\n    size: {\n      type: String,\n      default: 'm',\n      validator: value => (\n        ['s', 'm', 'l'].indexOf(value.toLowerCase()) !== -1\n      ),\n    },\n    code: {\n      type: String,\n      default: '528'\n    },\n    hasDropShadow: {\n      type: Boolean,\n      default: false,\n    },\n    hasBorder: {\n      type: Boolean,\n      default: true\n    },\n    hasBorderRadius: {\n      type: Boolean,\n      default: true,\n    },\n    gradient: {\n      type: String,\n      validator: value => (\n        ['top-down', 'real-linear', 'real-circular'].indexOf(value) !== -1\n      ),\n    },\n    className: {\n      type: String\n    }\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n@mixin before-styling {\n  content: '';\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n}\n\n.flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n\n  &.size {\n    &-s {\n      width: 16px;\n      height: 12px;\n\n      &.drop-shadow {\n        box-shadow: 0 0 1px 0.5px rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1px;\n      }\n    }\n\n    &-m {\n      width: 20px;\n      height: 15px;\n\n      &.drop-shadow {\n        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 1.5px;\n      }\n    }\n\n    &-l {\n      width: 32px;\n      height: 24px;\n\n      &.drop-shadow {\n        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.10);\n      }\n\n      &.border-radius {\n        border-radius: 2px;\n      }\n    }\n  }\n\n  &.border {\n    &::before {\n      @include before-styling();\n      border: 1px solid rgba(0, 0, 0, .5);\n      mix-blend-mode: overlay;\n    }\n  }\n\n  &.border-radius {\n    &::before {\n      @include before-styling();\n      border-radius: 1px;\n    }\n  }\n\n  &.top-down {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);\n    }\n  }\n\n  &.real-linear {\n    &::before {\n      @include before-styling();\n      background-image: linear-gradient(45deg, rgba(0,0,0,0.20) 0%, rgba(39,39,39,0.22) 11%, rgba(255,255,255,0.30) 27%, rgba(0,0,0,0.24) 41%, rgba(0,0,0,0.55) 52%, rgba(255,255,255,0.26) 63%, rgba(0,0,0,0.27) 74%, rgba(255,255,255,0.30) 100%);\n    }\n  }\n\n  &.real-circular {\n    &::before {\n      @include before-styling();\n      background: radial-gradient(50% 36%, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.24) 11%, rgba(0,0,0,0.55) 17%, rgba(255,255,255,0.26) 22%, rgba(0,0,0,0.17) 27%, rgba(255,255,255,0.28) 31%, rgba(255,255,255,0.00) 37%) center calc(50% - 8px) / 600% 600%,\n                  radial-gradient(50% 123%, rgba(255,255,255,0.30) 25%, rgba(0,0,0,0.24) 48%, rgba(0,0,0,0.55) 61%, rgba(255,255,255,0.26) 72%, rgba(0,0,0,0.17) 80%, rgba(255,255,255,0.28) 88%, rgba(255,255,255,0.30) 100%) center calc(50% - 8px) / 600% 600%;\n    }\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n</style>\n",".flag {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius {\n  border-radius: 1px;\n}\n.flag.size-m {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius {\n  border-radius: 1.5px;\n}\n.flag.size-l {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius {\n  border-radius: 2px;\n}\n.flag.border::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  mix-blend-mode: overlay;\n}\n.flag.border-radius::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  border-radius: 1px;\n}\n.flag.top-down::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 2%, rgba(255, 255, 255, 0.7) 100%);\n}\n.flag.real-linear::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(39, 39, 39, 0.22) 11%, rgba(255, 255, 255, 0.3) 27%, rgba(0, 0, 0, 0.24) 41%, rgba(0, 0, 0, 0.55) 52%, rgba(255, 255, 255, 0.26) 63%, rgba(0, 0, 0, 0.27) 74%, rgba(255, 255, 255, 0.3) 100%);\n}\n.flag.real-circular::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  display: block;\n  mix-blend-mode: overlay;\n  box-sizing: border-box;\n  background: radial-gradient(50% 36%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.24) 11%, rgba(0, 0, 0, 0.55) 17%, rgba(255, 255, 255, 0.26) 22%, rgba(0, 0, 0, 0.17) 27%, rgba(255, 255, 255, 0.28) 31%, rgba(255, 255, 255, 0) 37%) center calc(50% - 8px)/600% 600%, radial-gradient(50% 123%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0.55) 61%, rgba(255, 255, 255, 0.26) 72%, rgba(0, 0, 0, 0.17) 80%, rgba(255, 255, 255, 0.28) 88%, rgba(255, 255, 255, 0.3) 100%) center calc(50% - 8px)/600% 600%;\n}\n.flag img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/*# sourceMappingURL=Flag.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__ = "data-v-5b7ed2d6";
+    const __vue_scope_id__ = "data-v-48c48677";
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */
@@ -247,10 +247,10 @@
       undefined
     );
 
-  module.exports = {
-    install: function install(Vue, options) {
+  module.exports = __vue_component__;
+  module.exports.install = function install(Vue, options) {
       Vue.component(options.name || 'vue-flagpack', __vue_component__);
-    }
-  };
+    };
+  module.exports.Flag = __vue_component__;
 
 }());
diff --git a/src/Flag.vue b/src/Flag.vue
index 8d2464f..a14ea88 100644
--- a/src/Flag.vue
+++ b/src/Flag.vue
@@ -19,7 +19,7 @@ export default {
   name: 'Flag',
   methods: {
     getUrl(size, code) {
-      return require.context(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
+      return require(`../dist/flags/${size.toLowerCase()}/${code}.svg`)
     }
   },
   props: {
diff --git a/src/main.js b/src/main.js
index f23fb26..a4f9321 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import Flag from './Flag.vue'
 
-module.exports = {
-  install: function install(Vue, options) {
+module.exports = Flag
+module.exports.install = function install(Vue, options) {
     Vue.component(options.name || 'vue-flagpack', Flag)
   }
-}
+module.exports.Flag = Flag