vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
2 lines • 3.2 kB
JavaScript
let e=require("vue");var t=[`viewBox`],n=(0,e.createElementVNode)(`mask`,{id:`1d95aa2c-2038-4468-88c3-f239036ab8cf`},[(0,e.createElementVNode)(`circle`,{cx:`256`,cy:`256`,r:`256`,fill:`#fff`})],-1),r={mask:`url(#1d95aa2c-2038-4468-88c3-f239036ab8cf)`},i={key:0},a=(0,e.createStaticVNode)(`<path fill="#eee" d="M0 0h256l256 57v57l-32 28 32 29v57l-32 28 32 29v56l-32 29 32 28v57l-256 29L0 455v-57l32-28-32-29v-56l32-29-32-28Z"></path><path fill="#333" d="M256 0h256v57H256zm0 114h256v57H256zM0 228h512v57H0zm0 113h512v57H0zm0 114h512v57H0zM16 72l19 14 19-14-19-40z"></path><circle cx="46.7" cy="32.4" r="6" fill="#333"></circle><circle cx="22.7" cy="32.4" r="6" fill="#333"></circle><circle cx="34.7" cy="20.4" r="6" fill="#333"></circle><path fill="#333" d="m109 72 19 14 19-14-19-40z"></path><circle cx="140.4" cy="32.4" r="6" fill="#333"></circle><circle cx="116.4" cy="32.4" r="6" fill="#333"></circle><circle cx="128.4" cy="20.4" r="6" fill="#333"></circle><path fill="#333" d="m203 72 19 14 19-14-19-40z"></path><circle cx="234.1" cy="32.4" r="6" fill="#333"></circle><circle cx="210.1" cy="32.4" r="6" fill="#333"></circle><circle cx="222.1" cy="20.4" r="6" fill="#333"></circle><path fill="#333" d="m156 138 19 14 19-14-19-40z"></path><circle cx="187.2" cy="98.2" r="6" fill="#333"></circle><circle cx="163.2" cy="98.2" r="6" fill="#333"></circle><circle cx="175.2" cy="86.2" r="6" fill="#333"></circle><path fill="#333" d="m63 138 19 14 18-14-18-40z"></path><circle cx="93.5" cy="98.2" r="6" fill="#333"></circle><circle cx="69.5" cy="98.2" r="6" fill="#333"></circle><circle cx="81.5" cy="86.2" r="6" fill="#333"></circle><path fill="#333" d="m16 204 19 14 19-14-19-40z"></path><circle cx="46.7" cy="164" r="6" fill="#333"></circle><circle cx="22.7" cy="164" r="6" fill="#333"></circle><circle cx="34.7" cy="152" r="6" fill="#333"></circle><path fill="#333" d="m109 204 19 14 19-14-19-40z"></path><circle cx="140.4" cy="164" r="6" fill="#333"></circle><circle cx="116.4" cy="164" r="6" fill="#333"></circle><circle cx="128.4" cy="152" r="6" fill="#333"></circle><path fill="#333" d="m203 204 19 14 19-14-19-40z"></path><circle cx="234.1" cy="164" r="6" fill="#333"></circle><circle cx="210.1" cy="164" r="6" fill="#333"></circle><circle cx="222.1" cy="152" r="6" fill="#333"></circle>`,33),o={fill:`none`},s=[`r`],c=(0,e.defineComponent)({__name:`fr-bre`,props:{flagName:{},strokeColor:{default:`#000`},strokeWidth:{default:0}},setup(c){let l=c,u=(0,e.computed)(()=>512+2*l.strokeWidth),d=(0,e.computed)(()=>-l.strokeWidth),f=(0,e.computed)(()=>256+l.strokeWidth/2);return(c,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,class:`svg-circle-flags`,viewBox:`${d.value} ${d.value} ${u.value} ${u.value}`},[n,(0,e.createElementVNode)(`g`,r,[l.flagName?((0,e.openBlock)(),(0,e.createElementBlock)(`title`,i,(0,e.toDisplayString)(l.flagName),1)):(0,e.createCommentVNode)(``,!0),a]),(0,e.createElementVNode)(`g`,o,[(0,e.createElementVNode)(`circle`,{cx:`256`,cy:`256`,r:f.value,fill:`none`,style:(0,e.normalizeStyle)({stroke:l.strokeColor,strokeWidth:l.strokeWidth})},null,12,s)])],8,t))}});exports.default=c;
//# sourceMappingURL=fr-bre-CPNO4hIt.cjs.map