vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
59 lines (58 loc) • 2.16 kB
JavaScript
import { defineComponent as n, computed as o, openBlock as c, createElementBlock as h, createElementVNode as e, toDisplayString as r, createCommentVNode as d, normalizeStyle as v } from "vue";
const f = ["viewBox"], _ = /* @__PURE__ */ e("mask", { id: "b9f49bae-3cd5-49ff-a777-b28bc922ced9" }, [
/* @__PURE__ */ e("circle", {
cx: "256",
cy: "256",
r: "256",
fill: "#fff"
})
], -1), m = { mask: "url(#b9f49bae-3cd5-49ff-a777-b28bc922ced9)" }, u = { key: 0 }, p = /* @__PURE__ */ e("path", {
fill: "#d80027",
d: "m0 345 256.3-31.3L512 345v167H0z"
}, null, -1), k = /* @__PURE__ */ e("path", {
fill: "#eee",
d: "M0 0h512v345H0z"
}, null, -1), g = /* @__PURE__ */ e("path", {
fill: "#d80027",
d: "M356.2 211.5V178h11.1v-22.3H345V167h-22.2v-11.2h-22.3v22.3h11.2v33.4h-22.3v-78h11.1v-22.2h-22.2v11.1H267v-11h-22v11h-11.2v-11h-22.2v22.2h11.1v77.9h-22.3V178h11.2v-22.3h-22.3V167H167v-11.2h-22.3v22.3h11.1v33.4h-22.2v89h244.8v-89z"
}, null, -1), b = /* @__PURE__ */ e("path", {
fill: "#ffda44",
d: "M256 289.4a33.4 33.4 0 0 0-11.1 64.9v46.4h-33.4v44.5H267v-91a33.4 33.4 0 0 0-11.1-64.8zm0 44.5a11.1 11.1 0 1 1 0-22.2 11.1 11.1 0 0 1 0 22.2z"
}, null, -1), x = { fill: "none" }, w = ["r"], V = /* @__PURE__ */ n({
__name: "gi",
props: {
flagName: {},
strokeColor: { default: "#000" },
strokeWidth: { default: 0 }
},
setup(i) {
const t = i, l = o(() => 512 + 2 * t.strokeWidth), s = o(() => -t.strokeWidth), a = o(() => 256 + t.strokeWidth / 2);
return (z, y) => (c(), h("svg", {
xmlns: "http://www.w3.org/2000/svg",
class: "svg-circle-flags",
viewBox: `${s.value} ${s.value} ${l.value} ${l.value}`
}, [
_,
e("g", m, [
t.flagName ? (c(), h("title", u, r(t.flagName), 1)) : d("", !0),
p,
k,
g,
b
]),
e("g", x, [
e("circle", {
cx: "256",
cy: "256",
r: a.value,
fill: "none",
style: v({ stroke: t.strokeColor, strokeWidth: t.strokeWidth })
}, null, 12, w)
])
], 8, f));
}
});
export {
V as default
};
//# sourceMappingURL=gi-1c39ccb5.js.map