vue-circle-flags
Version:
A vue component with a collection of 400+ circular SVG country flags. Wrapper of HatScripts/circle-flags
1 lines • 5.97 kB
Source Map (JSON)
{"version":3,"file":"yorubaland-XD3o_Nuf.cjs","names":[],"sources":["../src/components/flags/yorubaland.vue","../src/components/flags/yorubaland.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=\"f0758696-24bc-4fae-ae7a-1190531ab59f\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#f0758696-24bc-4fae-ae7a-1190531ab59f)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path fill=\"#eee\" d=\"M384 0h128v128L352 352 128 512H0V384l160-224Z\" />\r\n <path fill=\"#338af3\" d=\"M0 384 384 0H0Z\" />\r\n <path fill=\"#6da544\" d=\"M512 128 128 512h384z\" />\r\n <path\r\n fill=\"#ffda44\"\r\n d=\"m432 234-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm-14-68-6 11h-13l6 11-6 10h13l6 12 6-12h13l-6-10 6-11h-12zm-37-56-7 11h-12l6 11-6 10h12l7 12 6-12h13l-7-10 7-11h-13zm-56-38-7 11h-12l6 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm-69-14-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm-68 14-7 11h-13l7 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm-56 38-7 11h-13l7 11-7 10h13l7 12 6-12h13l-7-10 7-11h-13zm-38 56-7 11H75l6 11-6 10h12l7 12 6-12h13l-7-10 7-11h-13zm-14 68-6 11H61l6 11-6 11h13l6 11 6-11h13l-6-11 6-11H86Zm14 69-7 11H75l6 11-6 10h12l7 11 6-11h13l-7-11 7-10h-13zm38 56-7 11h-13l7 11-7 10h13l7 11 6-11h13l-7-11 7-10h-13zm56 37-7 11h-13l7 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm68 14-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm69-14-7 11h-12l6 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm56-37-7 11h-12l6 11-6 10h12l7 11 6-11h13l-7-11 7-10h-13zm37-56-6 11h-13l6 11-6 10h13l6 11 6-11h13l-6-11 6-10h-13zM256 165c-3 0-6 3-6 6v20a38 28 0 0 0-32 28 38 28 0 0 0 1 5l3 23a34 54 0 0 0 17 47v22h34v-22a34 54 0 0 0 17-47l3-23a38 28 0 0 0 1-5 38 28 0 0 0-32-28v-20c0-3-3-6-6-6z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M199 199a80 80 0 1 0 114 0l-17 17a56 56 0 0 1 16 40 56 56 0 0 1-56 56 56 56 0 0 1-56-56 56 56 0 0 1 16-40l-17-17z\"\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=\"f0758696-24bc-4fae-ae7a-1190531ab59f\">\r\n <circle cx=\"256\" cy=\"256\" r=\"256\" fill=\"#fff\" />\r\n </mask>\r\n <g mask=\"url(#f0758696-24bc-4fae-ae7a-1190531ab59f)\">\r\n <title v-if=\"props.flagName\">{{ props.flagName }}</title>\r\n <path fill=\"#eee\" d=\"M384 0h128v128L352 352 128 512H0V384l160-224Z\" />\r\n <path fill=\"#338af3\" d=\"M0 384 384 0H0Z\" />\r\n <path fill=\"#6da544\" d=\"M512 128 128 512h384z\" />\r\n <path\r\n fill=\"#ffda44\"\r\n d=\"m432 234-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm-14-68-6 11h-13l6 11-6 10h13l6 12 6-12h13l-6-10 6-11h-12zm-37-56-7 11h-12l6 11-6 10h12l7 12 6-12h13l-7-10 7-11h-13zm-56-38-7 11h-12l6 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm-69-14-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm-68 14-7 11h-13l7 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm-56 38-7 11h-13l7 11-7 10h13l7 12 6-12h13l-7-10 7-11h-13zm-38 56-7 11H75l6 11-6 10h12l7 12 6-12h13l-7-10 7-11h-13zm-14 68-6 11H61l6 11-6 11h13l6 11 6-11h13l-6-11 6-11H86Zm14 69-7 11H75l6 11-6 10h12l7 11 6-11h13l-7-11 7-10h-13zm38 56-7 11h-13l7 11-7 10h13l7 11 6-11h13l-7-11 7-10h-13zm56 37-7 11h-13l7 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm68 14-6 11h-13l6 11-6 11h13l6 11 6-11h13l-6-11 6-11h-13zm69-14-7 11h-12l6 11-6 11h12l7 11 6-11h13l-7-11 7-11h-13zm56-37-7 11h-12l6 11-6 10h12l7 11 6-11h13l-7-11 7-10h-13zm37-56-6 11h-13l6 11-6 10h13l6 11 6-11h13l-6-11 6-10h-13zM256 165c-3 0-6 3-6 6v20a38 28 0 0 0-32 28 38 28 0 0 0 1 5l3 23a34 54 0 0 0 17 47v22h34v-22a34 54 0 0 0 17-47l3-23a38 28 0 0 0 1-5 38 28 0 0 0-32-28v-20c0-3-3-6-6-6z\"\r\n />\r\n <path\r\n fill=\"#d80027\"\r\n d=\"M199 199a80 80 0 1 0 114 0l-17 17a56 56 0 0 1 16 40 56 56 0 0 1-56 56 56 56 0 0 1-56-56 56 56 0 0 1 16-40l-17-17z\"\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":"o2DAiDQ,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"}