vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
1 lines • 10.1 kB
Source Map (JSON)
{"version":3,"file":"io-C_8G9Hrr.cjs","names":[],"sources":["../src/components/flags/io.vue","../src/components/flags/io.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=\"37571065-447e-45fa-b456-72658b87cc57\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#37571065-447e-45fa-b456-72658b87cc57)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path\r\n fill=\"#eee\"\r\n d=\"M0 0h32l32 32L96 0h160l12 8 13-8h36l24 8 25-8h36l25 8 24-8h36l25 22v34l-8 17 8 17v35l-8 17 8 17v34l-8 17 8 17v35l-8 17 8 17v34l-8 17 8 18v34l-8 17 8 17v35l-8 17 8 17v10h-22l-21-8-20 8h-44l-21-8-21 8h-44l-20-8-21 8h-44l-21-8-20 8h-44l-21-8-21 8H64l-21-8-21 8H0v-10l8-17-8-17v-35l8-17-8-17v-34l8-18-8-17v-34l8-17-8-17V96l32-32L0 32Z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M32 0v32H0v64h32v160h64V96h160V32H96V0Zm96 128 128 128v-31l-97-97z\"\r\n />\r\n <path\r\n fill=\"#0052b4\"\r\n d=\"M256 0v22c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19V0h-25c-4 4-9 7-18 7-8 0-13-3-18-7h-49c-4 4-9 7-18 7-8 0-14-3-18-7h-49c-5 4-10 7-18 7-9 0-14-3-18-7h-25zm0 56v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20V56c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 69v3h-83l83 83v16c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 20-43 20-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20v-34c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm-128 48v83h83l-83-83zM0 262v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20s21 20 43 20c21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 68v35c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19s21 19 43 19c21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19v-35c-21 0-21 20-43 20-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20s-21 20-43 20c-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20zm0 69v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20s21 20 43 20c21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 69v34c11 0 16 5 22 10h42c5-5 10-10 21-10s17 5 22 10h42c5-5 11-10 22-10s16 5 22 10h41c6-5 11-10 22-10s16 5 22 10h42c5-5 10-10 21-10s17 5 22 10h42c5-5 11-10 22-10s16 5 22 10h41c6-5 11-10 22-10v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19z\"\r\n />\r\n <path fill=\"#6da544\" d=\"M334 134h100l-50 50z\" />\r\n <path fill=\"#a2001d\" d=\"M373 173h22v50l-11 8-11-8Zm0 161h22v61h-22z\" />\r\n <path\r\n fill=\"#ffda44\"\r\n d=\"M451 301a34 34 0 0 0-56-25v-20h11v-22h-11v-11h-22v11h-11v22h11v20a34 34 0 0 0-47 3 33 33 0 0 0 2 46v20h112v-20c7-6 11-14 11-24z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M351 289c-3 0-6 2-8 4-4 4-4 12 0 16l8 6v8h65v-8l8-6c4-4 4-12 0-16s-10-5-15-1l-15 14h-21l-15-14a11 11 0 0 0-7-3z\"\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=\"37571065-447e-45fa-b456-72658b87cc57\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#37571065-447e-45fa-b456-72658b87cc57)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path\r\n fill=\"#eee\"\r\n d=\"M0 0h32l32 32L96 0h160l12 8 13-8h36l24 8 25-8h36l25 8 24-8h36l25 22v34l-8 17 8 17v35l-8 17 8 17v34l-8 17 8 17v35l-8 17 8 17v34l-8 17 8 18v34l-8 17 8 17v35l-8 17 8 17v10h-22l-21-8-20 8h-44l-21-8-21 8h-44l-20-8-21 8h-44l-21-8-20 8h-44l-21-8-21 8H64l-21-8-21 8H0v-10l8-17-8-17v-35l8-17-8-17v-34l8-18-8-17v-34l8-17-8-17V96l32-32L0 32Z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M32 0v32H0v64h32v160h64V96h160V32H96V0Zm96 128 128 128v-31l-97-97z\"\r\n />\r\n <path\r\n fill=\"#0052b4\"\r\n d=\"M256 0v22c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19V0h-25c-4 4-9 7-18 7-8 0-13-3-18-7h-49c-4 4-9 7-18 7-8 0-14-3-18-7h-49c-5 4-10 7-18 7-9 0-14-3-18-7h-25zm0 56v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20V56c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 69v3h-83l83 83v16c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 20-43 20-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20v-34c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm-128 48v83h83l-83-83zM0 262v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20s21 20 43 20c21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 68v35c21 0 21 19 43 19 21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19s21 19 43 19c21 0 21-19 42-19 22 0 22 19 43 19s21-19 43-19c21 0 21 19 42 19 22 0 22-19 43-19v-35c-21 0-21 20-43 20-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20s-21 20-43 20c-21 0-21-20-42-20-22 0-22 20-43 20s-21-20-43-20c-21 0-21 20-42 20-22 0-22-20-43-20zm0 69v34c21 0 21 20 43 20 21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20s21 20 43 20c21 0 21-20 42-20 22 0 22 20 43 20s21-20 43-20c21 0 21 20 42 20 22 0 22-20 43-20v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19zm0 69v34c11 0 16 5 22 10h42c5-5 10-10 21-10s17 5 22 10h42c5-5 11-10 22-10s16 5 22 10h41c6-5 11-10 22-10s16 5 22 10h42c5-5 10-10 21-10s17 5 22 10h42c5-5 11-10 22-10s16 5 22 10h41c6-5 11-10 22-10v-34c-21 0-21 19-43 19-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19s-21 19-43 19c-21 0-21-19-42-19-22 0-22 19-43 19s-21-19-43-19c-21 0-21 19-42 19-22 0-22-19-43-19z\"\r\n />\r\n <path fill=\"#6da544\" d=\"M334 134h100l-50 50z\" />\r\n <path fill=\"#a2001d\" d=\"M373 173h22v50l-11 8-11-8Zm0 161h22v61h-22z\" />\r\n <path\r\n fill=\"#ffda44\"\r\n d=\"M451 301a34 34 0 0 0-56-25v-20h11v-22h-11v-11h-22v11h-11v22h11v20a34 34 0 0 0-47 3 33 33 0 0 0 2 46v20h112v-20c7-6 11-14 11-24z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M351 289c-3 0-6 2-8 4-4 4-4 12 0 16l8 6v8h65v-8l8-6c4-4 4-12 0-16s-10-5-15-1l-15 14h-21l-15-14a11 11 0 0 0-7-3z\"\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":"mvHA4DQ,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"}