vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
1 lines • 6.85 kB
Source Map (JSON)
{"version":3,"file":"tm-Clsv-BLR.cjs","names":[],"sources":["../src/components/flags/tm.vue","../src/components/flags/tm.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=\"37e63c38-d93c-4c85-a54f-4d7413d59e46\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#37e63c38-d93c-4c85-a54f-4d7413d59e46)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"M0 0h66.8l67.8 32.3L200.3 0H512v512H200.3l-70.2-34.1L66.8 512H0z\"\r\n />\r\n <path fill=\"#d80027\" d=\"M66.8 0h133.5v512H66.8z\" />\r\n <g fill=\"#eee\">\r\n <path\r\n d=\"M374.4 193.1a78 78 0 0 0-31.9-92.3 78.2 78.2 0 0 1 16.3 4 78 78 0 1 1-52.6 146.6 78.1 78.1 0 0 1-15.1-7.3 78 78 0 0 0 83.3-51zm-69.8-102-11 14.2-16.8-6 10 14.8-10.9 14 17.2-5 10 14.9.6-18 17.2-5-16.9-6z\"\r\n />\r\n <path\r\n d=\"m334.1 137.3-11 14-16.8-6 10.1 14.8-11 14.2 17.2-5 10.1 14.7.5-17.8 17.2-5-16.8-6zM252.5 108l-11 14.1-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.1-5-16.8-6zm-1.2 52.7-11 14.2-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.1-5-16.8-6zm50.2 18-11 14.2-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.2-5-16.9-6z\"\r\n />\r\n </g>\r\n <path\r\n fill=\"#eee\"\r\n d=\"M117.8 134.8 95.4 118v-12l38.2-28 15.8-.1 22.3 16.7v11.5l-38.1 28.7z\"\r\n />\r\n <path\r\n fill=\"#ff9811\"\r\n d=\"M133.6 78h-15.8L95.4 94.5V106h38.2zm0 56.8h15.8l22.3-16.7v-12h-38.1z\"\r\n />\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"m117.8 284.4-22.4-16.6v-23.6l22.4-16.6h31.6l22.3 16.6v23.6l-22.3 16.6zm54.7 36.7h-9.7v-9.8h-17.1l-12.1-12-12.1 12h-17.2v9.8h-9.7v19.5h9.7v9.7h17.2l12 12.1 12.2-12.1h17v-9.7h9.8zm0-149.7h-9.7v-9.7h-17.1l-12.1-12.1-12.1 12h-17.2v9.8h-9.7V191h9.7v9.8h17.2l12 12 12.2-12h17V191h9.8z\"\r\n />\r\n <g fill=\"#d80027\">\r\n <path d=\"M122.4 244.9h22.3V267h-22.3z\" />\r\n <circle cx=\"133.6\" cy=\"181.2\" r=\"11.1\" />\r\n <circle cx=\"133.6\" cy=\"330.8\" r=\"11.1\" />\r\n </g>\r\n <path\r\n fill=\"#eee\"\r\n d=\"m117.8 434-22.4-16.8v-12l38.2-28 15.8-.1 22.3 16.7v11.5L133.6 434z\"\r\n />\r\n <path\r\n fill=\"#ff9811\"\r\n d=\"M133.6 377.2h-15.8l-22.4 16.5v11.5h38.2zm0 56.8h15.8l22.3-16.7v-12h-38.1z\"\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=\"37e63c38-d93c-4c85-a54f-4d7413d59e46\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#37e63c38-d93c-4c85-a54f-4d7413d59e46)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"M0 0h66.8l67.8 32.3L200.3 0H512v512H200.3l-70.2-34.1L66.8 512H0z\"\r\n />\r\n <path fill=\"#d80027\" d=\"M66.8 0h133.5v512H66.8z\" />\r\n <g fill=\"#eee\">\r\n <path\r\n d=\"M374.4 193.1a78 78 0 0 0-31.9-92.3 78.2 78.2 0 0 1 16.3 4 78 78 0 1 1-52.6 146.6 78.1 78.1 0 0 1-15.1-7.3 78 78 0 0 0 83.3-51zm-69.8-102-11 14.2-16.8-6 10 14.8-10.9 14 17.2-5 10 14.9.6-18 17.2-5-16.9-6z\"\r\n />\r\n <path\r\n d=\"m334.1 137.3-11 14-16.8-6 10.1 14.8-11 14.2 17.2-5 10.1 14.7.5-17.8 17.2-5-16.8-6zM252.5 108l-11 14.1-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.1-5-16.8-6zm-1.2 52.7-11 14.2-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.1-5-16.8-6zm50.2 18-11 14.2-16.8-6 10 14.7-10.9 14.2 17.2-5 10 14.7.6-17.8 17.2-5-16.9-6z\"\r\n />\r\n </g>\r\n <path\r\n fill=\"#eee\"\r\n d=\"M117.8 134.8 95.4 118v-12l38.2-28 15.8-.1 22.3 16.7v11.5l-38.1 28.7z\"\r\n />\r\n <path\r\n fill=\"#ff9811\"\r\n d=\"M133.6 78h-15.8L95.4 94.5V106h38.2zm0 56.8h15.8l22.3-16.7v-12h-38.1z\"\r\n />\r\n <path\r\n fill=\"#496e2d\"\r\n d=\"m117.8 284.4-22.4-16.6v-23.6l22.4-16.6h31.6l22.3 16.6v23.6l-22.3 16.6zm54.7 36.7h-9.7v-9.8h-17.1l-12.1-12-12.1 12h-17.2v9.8h-9.7v19.5h9.7v9.7h17.2l12 12.1 12.2-12.1h17v-9.7h9.8zm0-149.7h-9.7v-9.7h-17.1l-12.1-12.1-12.1 12h-17.2v9.8h-9.7V191h9.7v9.8h17.2l12 12 12.2-12h17V191h9.8z\"\r\n />\r\n <g fill=\"#d80027\">\r\n <path d=\"M122.4 244.9h22.3V267h-22.3z\" />\r\n <circle cx=\"133.6\" cy=\"181.2\" r=\"11.1\" />\r\n <circle cx=\"133.6\" cy=\"330.8\" r=\"11.1\" />\r\n </g>\r\n <path\r\n fill=\"#eee\"\r\n d=\"m117.8 434-22.4-16.8v-12l38.2-28 15.8-.1 22.3 16.7v11.5L133.6 434z\"\r\n />\r\n <path\r\n fill=\"#ff9811\"\r\n d=\"M133.6 377.2h-15.8l-22.4 16.5v11.5h38.2zm0 56.8h15.8l22.3-16.7v-12h-38.1z\"\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":"ogEA4EQ,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"}