UNPKG

vue-circle-flags

Version:

A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags

55 lines (54 loc) 2.18 kB
import { defineComponent as n, computed as l, openBlock as c, createElementBlock as i, createElementVNode as e, toDisplayString as h, createCommentVNode as d, normalizeStyle as f } from "vue"; const _ = ["viewBox"], m = /* @__PURE__ */ e("mask", { id: "c9bbec9c-0461-4d4e-a405-019a1f806dff" }, [ /* @__PURE__ */ e("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) ], -1), u = { mask: "url(#c9bbec9c-0461-4d4e-a405-019a1f806dff)" }, k = { key: 0 }, p = /* @__PURE__ */ e("path", { fill: "#338af3", d: "M0 0h512v144.7l-40.5 112.6 40.5 110V512H0V367.3l42.2-114L0 144.7z" }, null, -1), v = /* @__PURE__ */ e("path", { fill: "#eee", d: "M0 144.7h512v222.6H0z" }, null, -1), g = /* @__PURE__ */ e("path", { fill: "#338af3", d: "m157.5 167 8.3 25.5h26.9L171 208.2l8.2 25.5-21.7-15.7-21.7 15.7 8.3-25.5-21.7-15.7h26.9zm0 111.3 8.3 25.5h26.9L171 319.5l8.2 25.5-21.7-15.7-21.7 15.7 8.3-25.5-21.7-15.7h26.9zm197-111.3 8.2 25.5h26.9l-21.7 15.7 8.3 25.5-21.7-15.7-21.7 15.7 8.2-25.5-21.7-15.7h26.9zm0 111.3 8.2 25.5h26.9l-21.7 15.7 8.3 25.5-21.7-15.7-21.7 15.7 8.2-25.5-21.7-15.7h26.9zM256 222.6l8.3 25.5H291L269.4 264l8.3 25.5-21.7-15.8-21.7 15.8 8.3-25.5-21.7-15.8h26.8z" }, null, -1), z = { fill: "none" }, x = ["r"], B = /* @__PURE__ */ n({ __name: "hn", props: { flagName: {}, strokeColor: { default: "#000" }, strokeWidth: { default: 0 } }, setup(r) { const t = r, o = l(() => 512 + 2 * t.strokeWidth), s = l(() => -t.strokeWidth), a = l(() => 256 + t.strokeWidth / 2); return (w, y) => (c(), i("svg", { xmlns: "http://www.w3.org/2000/svg", class: "svg-circle-flags", viewBox: `${s.value} ${s.value} ${o.value} ${o.value}` }, [ m, e("g", u, [ t.flagName ? (c(), i("title", k, h(t.flagName), 1)) : d("", !0), p, v, g ]), e("g", z, [ e("circle", { cx: "256", cy: "256", r: a.value, fill: "none", style: f({ stroke: t.strokeColor, strokeWidth: t.strokeWidth }) }, null, 12, x) ]) ], 8, _)); } }); export { B as default }; //# sourceMappingURL=hn-d9f23ce2.js.map