@nonfx/vue-flagpack 2.0.3 → 2.0.7

package/README.md

@@ -133,27 +133,49 @@ app.mount('#app')
 
 
 
-## How Tree-Shaking Works
+## How Dynamic Loading Works
 
-Vue-flagpack uses **dynamic imports** to ensure only the flag SVGs you use are included in your bundle:
+Vue-flagpack uses **dynamic imports with code-splitting** for efficient flag loading:
 
-- **Automatic Tree-Shaking**: The `Flag` component dynamically imports SVG files based on the `code` prop
-- **No Bloat**: Unlike v1, all 250+ flags are NOT bundled into your app by default
-- **Optimized Bundles**: Modern bundlers (Vite, Webpack 5, Rollup, Nuxt 3) automatically code-split flag SVGs
-- **On-Demand**: Flags are loaded when the component renders, keeping initial bundle size minimal
+- **Dynamic Imports**: The `Flag` component dynamically imports SVG files based on the `code` prop
+- **Code-Splitting**: Modern bundlers (Vite, Webpack 5, Nuxt 3) split flags into separate chunks
+- **Lazy Loading**: Flags are loaded on-demand when the component renders
+- **Cache-Friendly**: Once loaded, flags are cached by the browser
 
-The package includes all flag SVGs in the `src/flags` directory. Your bundler (Vite/Webpack/Nuxt) will analyze the dynamic imports and only include the flags you actually reference in your code.
+### Static vs Dynamic Usage
+
+**Static usage (known at build time):**
+```vue
+<Flag code="NL" size="m" />
+<Flag code="US" size="m" />
+```
+Result: Only NL.svg and US.svg might be bundled (depending on bundler optimization)
+
+**Dynamic usage (refs/computed/props):**
+```vue
+<Flag :code="selectedCountry" size="m" />
+```
+Result: All flags in the `m` size directory (~750 flags) are included as separate chunks, loaded on-demand
+
+**Note:** Because the flag code is determined at runtime, bundlers cannot tree-shake unused flags. However, they are lazy-loaded, so only the flags actually displayed are fetched by the browser.
 
 ### Bundle Size Comparison
 
-- **v1.x (no tree-shaking)**: ~16MB (all flags bundled)
-- **v2.x (with tree-shaking)**: ~5KB base + only flags you use
+- **v1.x**: ~16MB (all flags bundled together)
+- **v2.x**: ~5KB base + flags as separate chunks
+
+**With static usage (code known at build time):**
+- Your bundle = ~5KB base + ~10KB (5 flags) = **~15KB total**
 
-Example: If your app uses 5 country flags:
-- Your bundle will be ~5KB (base) + ~10KB (5 flags) = **~15KB total**
-- The other 245+ unused flags are completely excluded from your bundle
+**With dynamic usage (code determined at runtime):**
+- Your bundle = ~5KB base + ~17MB (all flags as separate chunks)
+- But only the flags you actually display are loaded by the browser
+- Each flag is ~2-4KB and loaded on-demand
 
-This is true tree-shaking - only what you use gets bundled!
+**Recommendation:** For dynamic country selectors with many possible flags, this is optimal because:
+- Users only download the flags they actually see
+- Flags are cached after first load
+- No large initial bundle
 
 ## Available component configurations — Props
 

package/dist/vue-flag-rollup.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("flagpack-core");const n=["src"];var o=e.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(o){const r=o,t=e.ref(""),d=async()=>{try{const e=(a.isoToCountryCode(r.code)||r.code).toUpperCase(),n=r.size.toLowerCase(),o=await import(`./flags/${n}/${e}.svg?url`);t.value=o.default}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return e.onMounted(()=>{d()}),e.watch(()=>[r.code,r.size],()=>{d()}),(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flag",`size-${o.size}`,{"border-radius":o.hasBorderRadius},{border:o.hasBorder},{"drop-shadow":o.hasDropShadow},o.gradient,o.className])},[t.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,n)):e.createCommentVNode("",!0)],2))}});async function r(e,n="m"){try{const o=(a.isoToCountryCode(e)||e).toUpperCase(),r=n.toLowerCase();return(await import(`./flags/${r}/${o}.svg?url`)).default}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-140fb30e] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-140fb30e] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-140fb30e] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-140fb30e] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-140fb30e] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-140fb30e] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-140fb30e] {\n  border-radius: 2px;\n}\n.flag.border[data-v-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),o.__scopeId="data-v-140fb30e";var t={install:(e,a={})=>{e.component(a.name||"Flag",o)}};Object.defineProperty(exports,"isoToCountryCode",{enumerable:!0,get:function(){return a.isoToCountryCode}}),exports.Flag=o,exports.default=t,exports.getFlagUrl=r,exports.importFlag=async function(e,a="m"){return r(e,a)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),a=require("flagpack-core");const n=["src"];var o=e.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(o){const r=o,t=e.ref(""),d=async()=>{try{const e=(a.isoToCountryCode(r.code)||r.code).toUpperCase(),n=r.size.toLowerCase(),o=(await import(`@nonfx/vue-flagpack/src/flags/${n}/${e}.svg?raw`)).default,d=new Blob([o],{type:"image/svg+xml"});t.value=URL.createObjectURL(d)}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return e.onMounted(()=>{d()}),e.watch(()=>[r.code,r.size],()=>{d()}),(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flag",`size-${o.size}`,{"border-radius":o.hasBorderRadius},{border:o.hasBorder},{"drop-shadow":o.hasDropShadow},o.gradient,o.className])},[t.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,n)):e.createCommentVNode("",!0)],2))}});async function r(e,n="m"){try{const o=(a.isoToCountryCode(e)||e).toUpperCase(),r=n.toLowerCase(),t=(await import(`@nonfx/vue-flagpack/src/flags/${r}/${o}.svg?raw`)).default,d=new Blob([t],{type:"image/svg+xml"});return URL.createObjectURL(d)}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-c3ae00cc] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-c3ae00cc] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-c3ae00cc] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-c3ae00cc] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-c3ae00cc] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-c3ae00cc] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-c3ae00cc] {\n  border-radius: 2px;\n}\n.flag.border[data-v-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),o.__scopeId="data-v-c3ae00cc";var t={install:(e,a={})=>{e.component(a.name||"Flag",o)}};Object.defineProperty(exports,"isoToCountryCode",{enumerable:!0,get:function(){return a.isoToCountryCode}}),exports.Flag=o,exports.default=t,exports.getFlagUrl=r,exports.importFlag=async function(e,a="m"){return r(e,a)};

package/dist/vue-flag-rollup.esm.js

@@ -1 +1 @@
-import{defineComponent as e,ref as a,onMounted as n,watch as o,createElementBlock as r,openBlock as d,normalizeClass as t,createCommentVNode as i}from"vue";import{isoToCountryCode as l}from"flagpack-core";export{isoToCountryCode}from"flagpack-core";const s=["src"];var b=e({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(e){const b=e,g=a(""),f=async()=>{try{const e=(l(b.code)||b.code).toUpperCase(),a=b.size.toLowerCase(),n=await import(`./flags/${a}/${e}.svg?url`);g.value=n.default}catch(e){console.warn(`Flag not found for code: ${b.code}`,e),g.value=""}};return n(()=>{f()}),o(()=>[b.code,b.size],()=>{f()}),(a,n)=>(d(),r("div",{class:t(["flag",`size-${e.size}`,{"border-radius":e.hasBorderRadius},{border:e.hasBorder},{"drop-shadow":e.hasDropShadow},e.gradient,e.className])},[g.value?(d(),r("img",{key:0,src:g.value,alt:"flag"},null,8,s)):i("",!0)],2))}});async function g(e,a="m"){try{const n=(l(e)||e).toUpperCase(),o=a.toLowerCase();return(await import(`./flags/${o}/${n}.svg?url`)).default}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}async function f(e,a="m"){return g(e,a)}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-140fb30e] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-140fb30e] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-140fb30e] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-140fb30e] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-140fb30e] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-140fb30e] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-140fb30e] {\n  border-radius: 2px;\n}\n.flag.border[data-v-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),b.__scopeId="data-v-140fb30e";var c={install:(e,a={})=>{e.component(a.name||"Flag",b)}};export{b as Flag,c as default,g as getFlagUrl,f as importFlag};
+import{defineComponent as a,ref as e,onMounted as n,watch as o,createElementBlock as r,openBlock as d,normalizeClass as t,createCommentVNode as i}from"vue";import{isoToCountryCode as c}from"flagpack-core";export{isoToCountryCode}from"flagpack-core";const l=["src"];var s=a({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(a){const s=a,g=e(""),b=async()=>{try{const a=(c(s.code)||s.code).toUpperCase(),e=s.size.toLowerCase(),n=(await import(`@nonfx/vue-flagpack/src/flags/${e}/${a}.svg?raw`)).default,o=new Blob([n],{type:"image/svg+xml"});g.value=URL.createObjectURL(o)}catch(a){console.warn(`Flag not found for code: ${s.code}`,a),g.value=""}};return n(()=>{b()}),o(()=>[s.code,s.size],()=>{b()}),(e,n)=>(d(),r("div",{class:t(["flag",`size-${a.size}`,{"border-radius":a.hasBorderRadius},{border:a.hasBorder},{"drop-shadow":a.hasDropShadow},a.gradient,a.className])},[g.value?(d(),r("img",{key:0,src:g.value,alt:"flag"},null,8,l)):i("",!0)],2))}});async function g(a,e="m"){try{const n=(c(a)||a).toUpperCase(),o=e.toLowerCase(),r=(await import(`@nonfx/vue-flagpack/src/flags/${o}/${n}.svg?raw`)).default,d=new Blob([r],{type:"image/svg+xml"});return URL.createObjectURL(d)}catch(e){return console.warn(`Flag not found for code: ${a}`,e),""}}async function b(a,e="m"){return g(a,e)}!function(a,e){void 0===e&&(e={});var n=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=a:r.appendChild(document.createTextNode(a))}}('.flag[data-v-c3ae00cc] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-c3ae00cc] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-c3ae00cc] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-c3ae00cc] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-c3ae00cc] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-c3ae00cc] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-c3ae00cc] {\n  border-radius: 2px;\n}\n.flag.border[data-v-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),s.__scopeId="data-v-c3ae00cc";var p={install:(a,e={})=>{a.component(e.name||"Flag",s)}};export{s as Flag,p as default,g as getFlagUrl,b as importFlag};

package/dist/vue-flag-rollup.iife.js

@@ -1 +1 @@
-var VueFlagpack=function(e,a,n){"use strict";const o=["src"];var r=a.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(e){const r=e,t=a.ref(""),d=async()=>{try{const e=(n.isoToCountryCode(r.code)||r.code).toUpperCase(),a=r.size.toLowerCase(),o=await import(`./flags/${a}/${e}.svg?url`);t.value=o.default}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return a.onMounted(()=>{d()}),a.watch(()=>[r.code,r.size],()=>{d()}),(n,r)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["flag",`size-${e.size}`,{"border-radius":e.hasBorderRadius},{border:e.hasBorder},{"drop-shadow":e.hasDropShadow},e.gradient,e.className])},[t.value?(a.openBlock(),a.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,o)):a.createCommentVNode("",!0)],2))}});async function t(e,a="m"){try{const o=(n.isoToCountryCode(e)||e).toUpperCase(),r=a.toLowerCase();return(await import(`./flags/${r}/${o}.svg?url`)).default}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-140fb30e] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-140fb30e] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-140fb30e] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-140fb30e] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-140fb30e] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-140fb30e] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-140fb30e] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-140fb30e] {\n  border-radius: 2px;\n}\n.flag.border[data-v-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e]::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-140fb30e] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),r.__scopeId="data-v-140fb30e";var d={install:(e,a={})=>{e.component(a.name||"Flag",r)}};return Object.defineProperty(e,"isoToCountryCode",{enumerable:!0,get:function(){return n.isoToCountryCode}}),e.Flag=r,e.default=d,e.getFlagUrl=t,e.importFlag=async function(e,a="m"){return t(e,a)},Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue,flagpackCore);
+var VueFlagpack=function(e,a,n){"use strict";const o=["src"];var r=a.defineComponent({__name:"Flag",props:{size:{default:"m"},code:{default:"528"},hasDropShadow:{type:Boolean,default:!1},hasBorder:{type:Boolean,default:!0},hasBorderRadius:{type:Boolean,default:!0},gradient:{default:void 0},className:{default:""}},setup(e){const r=e,t=a.ref(""),d=async()=>{try{const e=(n.isoToCountryCode(r.code)||r.code).toUpperCase(),a=r.size.toLowerCase(),o=(await import(`@nonfx/vue-flagpack/src/flags/${a}/${e}.svg?raw`)).default,d=new Blob([o],{type:"image/svg+xml"});t.value=URL.createObjectURL(d)}catch(e){console.warn(`Flag not found for code: ${r.code}`,e),t.value=""}};return a.onMounted(()=>{d()}),a.watch(()=>[r.code,r.size],()=>{d()}),(n,r)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["flag",`size-${e.size}`,{"border-radius":e.hasBorderRadius},{border:e.hasBorder},{"drop-shadow":e.hasDropShadow},e.gradient,e.className])},[t.value?(a.openBlock(),a.createElementBlock("img",{key:0,src:t.value,alt:"flag"},null,8,o)):a.createCommentVNode("",!0)],2))}});async function t(e,a="m"){try{const o=(n.isoToCountryCode(e)||e).toUpperCase(),r=a.toLowerCase(),t=(await import(`@nonfx/vue-flagpack/src/flags/${r}/${o}.svg?raw`)).default,d=new Blob([t],{type:"image/svg+xml"});return URL.createObjectURL(d)}catch(a){return console.warn(`Flag not found for code: ${e}`,a),""}}!function(e,a){void 0===a&&(a={});var n=a.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.flag[data-v-c3ae00cc] {\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n}\n.flag.size-s[data-v-c3ae00cc] {\n  width: 16px;\n  height: 12px;\n}\n.flag.size-s.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 0 1px 0.5px rgba(0, 0, 0, 0.1);\n}\n.flag.size-s.border-radius[data-v-c3ae00cc] {\n  border-radius: 1px;\n}\n.flag.size-m[data-v-c3ae00cc] {\n  width: 20px;\n  height: 15px;\n}\n.flag.size-m.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-m.border-radius[data-v-c3ae00cc] {\n  border-radius: 1.5px;\n}\n.flag.size-l[data-v-c3ae00cc] {\n  width: 32px;\n  height: 24px;\n}\n.flag.size-l.drop-shadow[data-v-c3ae00cc] {\n  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.flag.size-l.border-radius[data-v-c3ae00cc] {\n  border-radius: 2px;\n}\n.flag.border[data-v-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc]::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-c3ae00cc] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}'),r.__scopeId="data-v-c3ae00cc";var d={install:(e,a={})=>{e.component(a.name||"Flag",r)}};return Object.defineProperty(e,"isoToCountryCode",{enumerable:!0,get:function(){return n.isoToCountryCode}}),e.Flag=r,e.default=d,e.getFlagUrl=t,e.importFlag=async function(e,a="m"){return t(e,a)},Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue,flagpackCore);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nonfx/vue-flagpack",
   "description": "Gorgeous flag components for your Vue 3 and Nuxt 3 project with tree-shaking support.",
-  "version": "2.0.3",
+  "version": "2.0.7",
   "type": "module",
   "author": "Yummygum <info@yummygum.com> (https://yummygum.com)",
   "repository": {
@@ -34,7 +34,8 @@
     },
     "./nuxt": {
       "import": "./dist/nuxt.mjs"
-    }
+    },
+    "./src/flags/*": "./src/flags/*"
   },
   "license": "MIT",
   "bugs": {

package/src/Flag.vue

@@ -44,14 +44,17 @@ const loadFlag = async () => {
     const countryCode = (isoToCountryCode(props.code) || props.code).toUpperCase()
     const sizeKey = props.size.toLowerCase()
     
-    // Dynamic import from local flags directory
-    // This enables tree-shaking - only flags you use will be bundled
+    // Dynamic import from package root
+    // Using absolute path from package root for proper resolution
     const svgModule = await import(
       /* @vite-ignore */
-      `./flags/${sizeKey}/${countryCode}.svg?url`
+      `@nonfx/vue-flagpack/src/flags/${sizeKey}/${countryCode}.svg?raw`
     )
     
-    flagSvg.value = svgModule.default
+    // Convert SVG string to data URL
+    const svgString = svgModule.default
+    const blob = new Blob([svgString], { type: 'image/svg+xml' })
+    flagSvg.value = URL.createObjectURL(blob)
   } catch (error) {
     console.warn(`Flag not found for code: ${props.code}`, error)
     flagSvg.value = ''

package/src/utils.ts

@@ -14,10 +14,13 @@ export async function getFlagUrl(
     
     const svgModule = await import(
       /* @vite-ignore */
-      `./flags/${sizeKey}/${countryCode}.svg?url`
+      `@nonfx/vue-flagpack/src/flags/${sizeKey}/${countryCode}.svg?raw`
     )
     
-    return svgModule.default
+    // Convert SVG string to data URL
+    const svgString = svgModule.default
+    const blob = new Blob([svgString], { type: 'image/svg+xml' })
+    return URL.createObjectURL(blob)
   } catch (error) {
     console.warn(`Flag not found for code: ${code}`, error)
     return ''