vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
44 lines (43 loc) • 1.93 kB
JavaScript
import { defineComponent as h, computed as c, openBlock as a, createElementBlock as r, createElementVNode as t, toDisplayString as n, createCommentVNode as d, normalizeStyle as f, createStaticVNode as m } from "vue";
const p = ["viewBox"], _ = /* @__PURE__ */ t("mask", { id: "c9f40bc7-7c39-495a-a35a-a21d828c9b66" }, [
/* @__PURE__ */ t("circle", {
cx: "256",
cy: "256",
r: "256",
fill: "#fff"
})
], -1), v = { mask: "url(#c9f40bc7-7c39-495a-a35a-a21d828c9b66)" }, g = { key: 0 }, k = /* @__PURE__ */ m('<path fill="#a2001d" d="M0 0h167l84.9 45L345 0h167v512H345l-87.7-48.1L167 512H0z"></path><path fill="#0052b4" d="M167 0h178v512H167z"></path><g fill="#ffda44"><path d="M122.4 256h22.3v89h-22.3zm-89 0h22.3v89H33.4z"></path><circle cx="89" cy="289.4" r="22.3"></circle><circle cx="89" cy="211.5" r="11.1"></circle><path d="M66.8 322.8h44.5V345H66.8zm0-89h44.5V256H66.8zM89 133.5l8 24.2h25.4l-20.6 15 7.9 24.3L89 182l-20.6 15 7.9-24.3-20.6-15h25.5z"></path></g>', 3), u = { fill: "none" }, x = ["r"], H = /* @__PURE__ */ h({
__name: "mn",
props: {
flagName: {},
strokeColor: { default: "#000" },
strokeWidth: { default: 0 }
},
setup(s) {
const e = s, o = c(() => 512 + 2 * e.strokeWidth), l = c(() => -e.strokeWidth), i = c(() => 256 + e.strokeWidth / 2);
return (z, y) => (a(), r("svg", {
xmlns: "http://www.w3.org/2000/svg",
class: "svg-circle-flags",
viewBox: `${l.value} ${l.value} ${o.value} ${o.value}`
}, [
_,
t("g", v, [
e.flagName ? (a(), r("title", g, n(e.flagName), 1)) : d("", !0),
k
]),
t("g", u, [
t("circle", {
cx: "256",
cy: "256",
r: i.value,
fill: "none",
style: f({ stroke: e.strokeColor, strokeWidth: e.strokeWidth })
}, null, 12, x)
])
], 8, p));
}
});
export {
H as default
};
//# sourceMappingURL=mn-dc1d9645.js.map