vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
51 lines (50 loc) • 2.05 kB
JavaScript
import { defineComponent as n, computed as l, openBlock as c, createElementBlock as i, createElementVNode as t, toDisplayString as h, createCommentVNode as d, normalizeStyle as m } from "vue";
const _ = ["viewBox"], f = /* @__PURE__ */ t("mask", { id: "a2135811-c982-4416-a8f1-c4acda7e2b1c" }, [
/* @__PURE__ */ t("circle", {
cx: "256",
cy: "256",
r: "256",
fill: "#fff"
})
], -1), v = { mask: "url(#a2135811-c982-4416-a8f1-c4acda7e2b1c)" }, u = { key: 0 }, k = /* @__PURE__ */ t("path", {
fill: "#eee",
d: "M0 0h512v55.7l-25 32.7 25 34v267.2l-26 36 26 30.7V512H0v-55.7l24.8-34.1L0 389.6V122.4l27.2-33.2L0 55.7z"
}, null, -1), p = /* @__PURE__ */ t("path", {
fill: "#0052b4",
d: "M0 55.7v66.7h512V55.7zm0 333.9v66.7h512v-66.7zm352.4-189.3H288l-32-55.6-32.1 55.6h-64.3l32.1 55.7-32 55.7h64.2l32.1 55.6 32.1-55.6h64.3L320.3 256l32-55.7zm-57 55.7-19.7 34.2h-39.4L216.5 256l19.8-34.2h39.4l19.8 34.2zM256 187.6l7.3 12.7h-14.6zm-59.2 34.2h14.7l-7.4 12.7zm0 68.4 7.3-12.7 7.4 12.7zm59.2 34.2-7.3-12.7h14.6zm59.2-34.2h-14.7l7.4-12.7zm-14.7-68.4h14.7l-7.3 12.7z"
}, null, -1), g = { fill: "none" }, z = ["r"], W = /* @__PURE__ */ n({
__name: "il",
props: {
flagName: {},
strokeColor: { default: "#000" },
strokeWidth: { default: 0 }
},
setup(a) {
const e = a, o = l(() => 512 + 2 * e.strokeWidth), s = l(() => -e.strokeWidth), r = l(() => 256 + e.strokeWidth / 2);
return (x, w) => (c(), i("svg", {
xmlns: "http://www.w3.org/2000/svg",
class: "svg-circle-flags",
viewBox: `${s.value} ${s.value} ${o.value} ${o.value}`
}, [
f,
t("g", v, [
e.flagName ? (c(), i("title", u, h(e.flagName), 1)) : d("", !0),
k,
p
]),
t("g", g, [
t("circle", {
cx: "256",
cy: "256",
r: r.value,
fill: "none",
style: m({ stroke: e.strokeColor, strokeWidth: e.strokeWidth })
}, null, 12, z)
])
], 8, _));
}
});
export {
W as default
};
//# sourceMappingURL=il-ec435a7f.js.map