vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
1 lines • 6.64 kB
Source Map (JSON)
{"version":3,"file":"mx-BGB-8mhJ.cjs","names":[],"sources":["../src/components/flags/mx.vue","../src/components/flags/mx.vue"],"sourcesContent":["<template>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"svg-circle-flags\"\r\n :viewBox=\"`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`\"\r\n >\r\n <mask id=\"c54d7be6-89fd-42c8-b1c5-aee70c252801\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#c54d7be6-89fd-42c8-b1c5-aee70c252801)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path fill=\"#eee\" d=\"M144 0h223l33 256-33 256H144l-32-256z\" />\r\n <path fill=\"#496e2d\" d=\"M0 0h144v512H0z\" />\r\n <path fill=\"#d80027\" d=\"M368 0h144v512H368z\" />\r\n <path fill=\"#ffda44\" d=\"M256 277v10h12l10-22z\" />\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"M160 242a96 96 0 0 0 192 0h-11a85 85 0 0 1-170 0zm39 17-4 2c-2 2-2 6 1 8 15 14 34 22 54 24v17h12v-17c20-2 39-10 54-24 3-2 3-6 1-8s-6-2-8 0a78 78 0 0 1-53 21c-19 0-38-8-53-21z\"\r\n />\r\n <path\r\n fill=\"#338af3\"\r\n d=\"M256 316c-14 0-28-5-40-13l6-9c20 13 48 13 68 0l7 9c-12 8-26 13-41 13z\"\r\n />\r\n <path\r\n fill=\"#751a46\"\r\n d=\"M256 174c22 11 12 33 11 34l-2-4c-5-11-18-18-31-18v11c6 0 11 5 11 11-7 7-9 17-4 26l4 8-13 23 29-7 18 18v-11l11 11 23-11-35-21-5-21 28 16c4 11 12 21 23 26 9-83-42-91-61-91z\"\r\n />\r\n <path\r\n fill=\"#6da544\"\r\n d=\"M222 271c-15 0-33-12-38-40l11-2c4 23 18 31 27 31 3 0 5-1 6-3 0-2 0-3-6-5-3-1-7-2-10-5-10-12 4-24 11-30 1-1 2-2 1-3 0 0-2-2-5-2-7 0-12-4-14-11-2-6 2-13 8-17l5 11c-2 0-2 2-2 4 0 0 1 2 3 2 7 0 14 4 16 9 1 3 2 9-5 15-7 7-11 12-9 15l5 1c5 2 14 5 13 17-1 8-8 13-17 13h-1z\"\r\n />\r\n <path fill=\"#ffda44\" d=\"m234 186-12 11v11l18-9c3-1 3-5 1-7z\" />\r\n <circle cx=\"172\" cy=\"275\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"189\" cy=\"302\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"216\" cy=\"323\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"297\" cy=\"323\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"324\" cy=\"302\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"341\" cy=\"275\" r=\"8\" fill=\"#ffda44\" />\r\n <rect\r\n width=\"34\"\r\n height=\"22\"\r\n x=\"239\"\r\n y=\"299\"\r\n fill=\"#ff9811\"\r\n rx=\"11\"\r\n ry=\"11\"\r\n />\r\n </g>\r\n <g fill=\"none\">\r\n <circle\r\n cx=\"256\"\r\n cy=\"256\"\r\n :r=\"circleStroke\"\r\n fill=\"none\"\r\n :style=\"{ stroke: props.strokeColor, strokeWidth: props.strokeWidth }\"\r\n />\r\n </g>\r\n </svg>\r\n</template>\r\n<script setup lang=\"ts\">\r\n import { computed } from 'vue';\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n flagName: string | undefined;\r\n strokeColor?: string;\r\n strokeWidth?: number;\r\n }>(),\r\n {\r\n strokeColor: '#000',\r\n strokeWidth: 0\r\n }\r\n );\r\n\r\n const svgSize = computed(() => 512 + 2 * props.strokeWidth),\r\n viewBoxOrigin = computed(() => -props.strokeWidth),\r\n circleStroke = computed(() => 256 + props.strokeWidth / 2);\r\n</script>\r\n","<template>\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"svg-circle-flags\"\r\n :viewBox=\"`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`\"\r\n >\r\n <mask id=\"c54d7be6-89fd-42c8-b1c5-aee70c252801\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#c54d7be6-89fd-42c8-b1c5-aee70c252801)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path fill=\"#eee\" d=\"M144 0h223l33 256-33 256H144l-32-256z\" />\r\n <path fill=\"#496e2d\" d=\"M0 0h144v512H0z\" />\r\n <path fill=\"#d80027\" d=\"M368 0h144v512H368z\" />\r\n <path fill=\"#ffda44\" d=\"M256 277v10h12l10-22z\" />\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"M160 242a96 96 0 0 0 192 0h-11a85 85 0 0 1-170 0zm39 17-4 2c-2 2-2 6 1 8 15 14 34 22 54 24v17h12v-17c20-2 39-10 54-24 3-2 3-6 1-8s-6-2-8 0a78 78 0 0 1-53 21c-19 0-38-8-53-21z\"\r\n />\r\n <path\r\n fill=\"#338af3\"\r\n d=\"M256 316c-14 0-28-5-40-13l6-9c20 13 48 13 68 0l7 9c-12 8-26 13-41 13z\"\r\n />\r\n <path\r\n fill=\"#751a46\"\r\n d=\"M256 174c22 11 12 33 11 34l-2-4c-5-11-18-18-31-18v11c6 0 11 5 11 11-7 7-9 17-4 26l4 8-13 23 29-7 18 18v-11l11 11 23-11-35-21-5-21 28 16c4 11 12 21 23 26 9-83-42-91-61-91z\"\r\n />\r\n <path\r\n fill=\"#6da544\"\r\n d=\"M222 271c-15 0-33-12-38-40l11-2c4 23 18 31 27 31 3 0 5-1 6-3 0-2 0-3-6-5-3-1-7-2-10-5-10-12 4-24 11-30 1-1 2-2 1-3 0 0-2-2-5-2-7 0-12-4-14-11-2-6 2-13 8-17l5 11c-2 0-2 2-2 4 0 0 1 2 3 2 7 0 14 4 16 9 1 3 2 9-5 15-7 7-11 12-9 15l5 1c5 2 14 5 13 17-1 8-8 13-17 13h-1z\"\r\n />\r\n <path fill=\"#ffda44\" d=\"m234 186-12 11v11l18-9c3-1 3-5 1-7z\" />\r\n <circle cx=\"172\" cy=\"275\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"189\" cy=\"302\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"216\" cy=\"323\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"297\" cy=\"323\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"324\" cy=\"302\" r=\"8\" fill=\"#ffda44\" />\r\n <circle cx=\"341\" cy=\"275\" r=\"8\" fill=\"#ffda44\" />\r\n <rect\r\n width=\"34\"\r\n height=\"22\"\r\n x=\"239\"\r\n y=\"299\"\r\n fill=\"#ff9811\"\r\n rx=\"11\"\r\n ry=\"11\"\r\n />\r\n </g>\r\n <g fill=\"none\">\r\n <circle\r\n cx=\"256\"\r\n cy=\"256\"\r\n :r=\"circleStroke\"\r\n fill=\"none\"\r\n :style=\"{ stroke: props.strokeColor, strokeWidth: props.strokeWidth }\"\r\n />\r\n </g>\r\n </svg>\r\n</template>\r\n<script setup lang=\"ts\">\r\n import { computed } from 'vue';\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n flagName: string | undefined;\r\n strokeColor?: string;\r\n strokeWidth?: number;\r\n }>(),\r\n {\r\n strokeColor: '#000',\r\n strokeWidth: 0\r\n }\r\n );\r\n\r\n const svgSize = computed(() => 512 + 2 * props.strokeWidth),\r\n viewBoxOrigin = computed(() => -props.strokeWidth),\r\n circleStroke = computed(() => 256 + props.strokeWidth / 2);\r\n</script>\r\n"],"mappings":"46DA0EQ,GAAA,EAAA,EAAA,cAAyB,IAAM,EAAI,EAAM,WAAW,EACxD,GAAA,EAAA,EAAA,cAA+B,CAAC,EAAM,WAAW,EACjD,GAAA,EAAA,EAAA,cAA8B,IAAM,EAAM,YAAc,CAAC"}