SowinskiBraeden/RetirementCalculator
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

feature/fully implemented challenge 1

Browse Source
This commit is contained in:
Joaquin committed 2025-05-07 16:56:26 -07:00
1 parent 2ad43139de
commit 1b6c80f84d
27 files changed
+384 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/public/scripts/calcExchange.js
+3
View File
@@ -0,0 +1,3 @@
let rate = document.getElementsByClassName("countryButton").value;
document.getElementById("exchange").innerHTML
src/public/scripts/geolocation.js
+54 -1
View File
@@ -4,13 +4,66 @@ function getLocation() {
}
}
function update(data) {
document.getElementById("loading").style = "display: none";
document.getElementById("currencyExchange").style = "display: flex";
document.getElementById("yourFlag").src = `/static/svgs/flags/${data.data.country}.svg`
document.getElementById("yourFlag").alt = data.data.country;
document.getElementById("flagTag").innerHTML = `(${data.data.country})`;
document.getElementById("exchangeFlag").src = `/static/svgs/flags/USD.svg`;
document.getElementById("exchangeFlag").alt = "USD";
document.getElementById("exFlagTag").innerHTML = "(USD)";
document.getElementById("dropdown-country-button").value = data.data.toCurrencyRates["USD"];
updateExchange(document.getElementById("dropdown-country-button").value);
const dropdown = document.getElementById("dropdown");
let countries = Object.keys(data.data.toCurrencyRates);
countries.forEach(item => {
if (dropdown.querySelector(`button[value="${data.data.toCurrencyRates[item]}"]`)) {
return;
}
const listItem = document.createElement("li");
listItem.innerHTML = `<button onclick="switchButton(this)" type="button" value="${data.data.toCurrencyRates[item]}" class="country Button inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
<span class="inline-flex items-center">
<img src="/static/svgs/flags/${item}.svg" class="h-4 w-4 me-2" alt="${item}"> (${item})
</span>
</button>`;
dropdown.appendChild(listItem);
});
console.log(data);
}
function switchButton(clickedButton) {
document.getElementById("dropdown-country-button").value = clickedButton.value;
updateExchange(document.getElementById("dropdown-country-button").value);
document.getElementById("dropdown-country-button").innerHTML = clickedButton.innerHTML +
`
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
`;
}
function updateExchange(exRate) {
document.getElementById("exchange1").innerHTML = "$1.00 = $" +`${(1 * exRate).toFixed(2)}`;
}
async function getLatestExchange(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
const res = await fetch(`/exRates/${lat}/${lon}`);
const data = await res.json();
console.log(data);
update(data);
}
function error(err) {
src/public/scripts/header.js
View File
Whitespace-only changes.
src/public/svgs/flags/BGN.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-bg" viewBox="0 0 640 480">
<path fill="#fff" d="M0 0h640v160H0z"/>
<path fill="#00966e" d="M0 160h640v160H0z"/>
<path fill="#d62612" d="M0 320h640v160H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

src/public/svgs/flags/CHF.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ch" viewBox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="red" d="M0 0h640v480H0z"/>
<g fill="#fff">
<path d="M170 195h300v90H170z"/>
<path d="M275 90h90v300h-90z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 290 B

src/public/svgs/flags/CZK.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
<path fill="#fff" d="M0 0h640v240H0z"/>
<path fill="#d7141a" d="M0 240h640v240H0z"/>
<path fill="#11457e" d="M360 240 0 0v480z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

src/public/svgs/flags/DKK.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-dk" viewBox="0 0 640 480">
<path fill="#c8102e" d="M0 0h640.1v480H0z"/>
<path fill="#fff" d="M205.7 0h68.6v480h-68.6z"/>
<path fill="#fff" d="M0 205.7h640.1v68.6H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B

src/public/svgs/flags/HKD.svg
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-hk" viewBox="0 0 640 480">
<path fill="#EC1B2E" d="M0 0h640v480H0"/>
<path id="hk-a" fill="#fff" d="M346.3 103.1C267 98 230.6 201.9 305.6 240.3c-26-22.4-20.6-55.3-10.1-72.4l1.9 1.1c-13.8 23.5-11.2 52.7 11.1 71-12.7-12.3-9.5-39 12.1-48.9s23.6-39.3 16.4-49.1q-14.7-25.6 9.3-38.9M307.9 164l-4.7 7.4-1.8-8.6-8.6-2.3 7.8-4.3-.6-8.9 6.5 6.1 8.3-3.3-3.7 8.1 5.6 6.8z"/>
<use xlink:href="#hk-a" transform="rotate(72 312.5 243.5)"/>
<use xlink:href="#hk-a" transform="rotate(144 312.5 243.5)"/>
<use xlink:href="#hk-a" transform="rotate(216 312.5 243.5)"/>
<use xlink:href="#hk-a" transform="rotate(288 312.5 243.5)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

src/public/svgs/flags/HUF.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-hu" viewBox="0 0 640 480">
<g fill-rule="evenodd">
<path fill="#fff" d="M640 480H0V0h640z"/>
<path fill="#388d00" d="M640 480H0V320h640z"/>
<path fill="#d43516" d="M640 160.1H0V.1h640z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

src/public/svgs/flags/IDR.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-id" viewBox="0 0 640 480">
<path fill="#e70011" d="M0 0h640v240H0Z"/>
<path fill="#fff" d="M0 240h640v240H0Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 178 B

src/public/svgs/flags/ILS.svg
+14
View File
@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-il" viewBox="0 0 640 480">
<defs>
<clipPath id="il-a">
<path fill-opacity=".7" d="M-87.6 0H595v512H-87.6z"/>
</clipPath>
</defs>
<g fill-rule="evenodd" clip-path="url(#il-a)" transform="translate(82.1)scale(.94)">
<path fill="#fff" d="M619.4 512H-112V0h731.4z"/>
<path fill="#0038b8" d="M619.4 115.2H-112V48h731.4zm0 350.5H-112v-67.2h731.4zm-483-275 110.1 191.6L359 191.6z"/>
<path fill="#fff" d="m225.8 317.8 20.9 35.5 21.4-35.3z"/>
<path fill="#0038b8" d="M136 320.6 246.2 129l112.4 190.8z"/>
<path fill="#fff" d="m225.8 191.6 20.9-35.5 21.4 35.4zM182 271.1l-21.7 36 41-.1-19.3-36zm-21.3-66.5 41.2.3-19.8 36.3zm151.2 67 20.9 35.5-41.7-.5zm20.5-67-41.2.3 19.8 36.3zm-114.3 0L189.7 256l28.8 50.3 52.8 1.2 32-51.5-29.6-52z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 834 B

src/public/svgs/flags/ISK.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-is" viewBox="0 0 640 480">
<defs>
<clipPath id="is-a">
<path fill-opacity=".7" d="M0 0h640v480H0z"/>
</clipPath>
</defs>
<g fill-rule="evenodd" stroke-width="0" clip-path="url(#is-a)">
<path fill="#003897" d="M0 0h666.7v480H0z"/>
<path fill="#fff" d="M0 186.7h186.7V0h106.6v186.7h373.4v106.6H293.3V480H186.7V293.3H0z"/>
<path fill="#d72828" d="M0 213.3h213.3V0h53.4v213.3h400v53.4h-400V480h-53.4V266.7H0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

src/public/svgs/flags/KRW.svg
+24
View File
@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-kr" viewBox="0 0 640 480">
<defs>
<clipPath id="kr-a">
<path fill-opacity=".7" d="M-95.8-.4h682.7v512H-95.8z"/>
</clipPath>
</defs>
<g fill-rule="evenodd" clip-path="url(#kr-a)" transform="translate(89.8 .4)scale(.9375)">
<path fill="#fff" d="M-95.8-.4H587v512H-95.8Z"/>
<g transform="rotate(-56.3 361.6 -101.3)scale(10.66667)">
<g id="kr-c">
<path id="kr-b" fill="#000001" d="M-6-26H6v2H-6Zm0 3H6v2H-6Zm0 3H6v2H-6Z"/>
<use xlink:href="#kr-b" width="100%" height="100%" y="44"/>
</g>
<path stroke="#fff" d="M0 17v10"/>
<path fill="#cd2e3a" d="M0-12a12 12 0 0 1 0 24Z"/>
<path fill="#0047a0" d="M0-12a12 12 0 0 0 0 24A6 6 0 0 0 0 0Z"/>
<circle cy="-6" r="6" fill="#cd2e3a"/>
</g>
<g transform="rotate(-123.7 191.2 62.2)scale(10.66667)">
<use xlink:href="#kr-c" width="100%" height="100%"/>
<path stroke="#fff" d="M0-23.5v3M0 17v3.5m0 3v3"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

src/public/svgs/flags/MYR.svg
+26
View File
@@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-my" viewBox="0 0 640 480">
<g clip-path="url(#my-a)">
<path fill="#C00" d="M0 0h640v480H0z"/>
<path fill="#C00" d="M0 0h640v34.3H0z"/>
<path fill="#fff" d="M0 34.3h640v34.3H0z"/>
<path fill="#C00" d="M0 68.6h640v34.3H0z"/>
<path fill="#fff" d="M0 102.9h640V137H0z"/>
<path fill="#C00" d="M0 137.1h640v34.3H0z"/>
<path fill="#fff" d="M0 171.4h640v34.3H0z"/>
<path fill="#C00" d="M0 205.7h640V240H0z"/>
<path fill="#fff" d="M0 240h640v34.3H0z"/>
<path fill="#C00" d="M0 274.3h640v34.3H0z"/>
<path fill="#fff" d="M0 308.6h640v34.3H0z"/>
<path fill="#C00" d="M0 342.9h640V377H0z"/>
<path fill="#fff" d="M0 377.1h640v34.3H0z"/>
<path fill="#C00" d="M0 411.4h640v34.3H0z"/>
<path fill="#fff" d="M0 445.7h640V480H0z"/>
<path fill="#006" d="M0 .5h320v274.3H0z"/>
<path fill="#FC0" d="m207.5 73.8 6 40.7 23-34-12.4 39.2 35.5-20.8-28.1 30 41-3.2-38.3 14.8 38.3 14.8-41-3.2 28.1 30-35.5-20.8 12.3 39.3-23-34.1-6 40.7-5.9-40.7-23 34 12.4-39.2-35.5 20.8 28-30-41 3.2 38.4-14.8-38.3-14.8 41 3.2-28.1-30 35.5 20.8-12.4-39.3 23 34.1zm-33.3 1.7a71 71 0 0 0-100 65 71 71 0 0 0 100 65 80 80 0 0 1-83.2 6.2 80 80 0 0 1-43.4-71.2 80 80 0 0 1 126.6-65"/>
</g>
<defs>
<clipPath id="my-a">
<path fill="#fff" d="M0 0h640v480H0z"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/public/svgs/flags/NOK.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-no" viewBox="0 0 640 480">
<path fill="#ed2939" d="M0 0h640v480H0z"/>
<path fill="#fff" d="M180 0h120v480H180z"/>
<path fill="#fff" d="M0 180h640v120H0z"/>
<path fill="#002664" d="M210 0h60v480h-60z"/>
<path fill="#002664" d="M0 210h640v60H0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

src/public/svgs/flags/NZD.svg
+36
View File
@@ -0,0 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-nz" viewBox="0 0 640 480">
<defs>
<g id="nz-b">
<g id="nz-a">
<path d="M0-.3v.5l1-.5z"/>
<path d="M.2.3 0-.1l1-.2z"/>
</g>
<use xlink:href="#nz-a" transform="scale(-1 1)"/>
<use xlink:href="#nz-a" transform="rotate(72 0 0)"/>
<use xlink:href="#nz-a" transform="rotate(-72 0 0)"/>
<use xlink:href="#nz-a" transform="scale(-1 1)rotate(72)"/>
</g>
</defs>
<path fill="#00247d" fill-rule="evenodd" d="M0 0h640v480H0z"/>
<g transform="translate(-111 36.1)scale(.66825)">
<use xlink:href="#nz-b" width="100%" height="100%" fill="#fff" transform="translate(900 120)scale(45.4)"/>
<use xlink:href="#nz-b" width="100%" height="100%" fill="#cc142b" transform="matrix(30 0 0 30 900 120)"/>
</g>
<g transform="rotate(82 525.2 114.6)scale(.66825)">
<use xlink:href="#nz-b" width="100%" height="100%" fill="#fff" transform="rotate(-82 519 -457.7)scale(40.4)"/>
<use xlink:href="#nz-b" width="100%" height="100%" fill="#cc142b" transform="rotate(-82 519 -457.7)scale(25)"/>
</g>
<g transform="rotate(82 525.2 114.6)scale(.66825)">
<use xlink:href="#nz-b" width="100%" height="100%" fill="#fff" transform="rotate(-82 668.6 -327.7)scale(45.4)"/>
<use xlink:href="#nz-b" width="100%" height="100%" fill="#cc142b" transform="rotate(-82 668.6 -327.7)scale(30)"/>
</g>
<g transform="translate(-111 36.1)scale(.66825)">
<use xlink:href="#nz-b" width="100%" height="100%" fill="#fff" transform="translate(900 480)scale(50.4)"/>
<use xlink:href="#nz-b" width="100%" height="100%" fill="#cc142b" transform="matrix(35 0 0 35 900 480)"/>
</g>
<path fill="#012169" d="M0 0h320v240H0z"/>
<path fill="#fff" d="m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z"/>
<path fill="#c8102e" d="M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z"/>
<path fill="#fff" d="M120.5 0v240h80V0zM0 80v80h320V80z"/>
<path fill="#c8102e" d="M0 96.5v48h320v-48zM136.5 0v240h48V0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

src/public/svgs/flags/PHP.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ph" viewBox="0 0 640 480">
<path fill="#0038a8" d="M0 0h640v240H0z"/>
<path fill="#ce1126" d="M0 240h640v240H0z"/>
<path fill="#fff" d="M415.7 240 0 480V0"/>
<path fill="#fcd116" d="M26.7 42.4 41 55l16.6-9.2-7.4 17.5 14 13-19-1.6-8.1 17.2-4.3-18.5L14 71l16.3-10zm323.8 172.3.4 19 18 6.3-18 6.2-.4 19-11.5-15.1-18.2 5.5 10.8-15.6-10.8-15.6 18.2 5.5zM37.2 388.1l8 17.2 19-1.6-13.9 13 7.4 17.5-16.6-9.1-14.4 12.4 3.6-18.7L14 409l18.9-2.4zm114.2-249-6.2 6.2 3.1 47-3 .3-5.7-42.9-5.1 5 7.6 38.4a48 48 0 0 0-17.2 7.1l-21.7-32.4H96l26.4 34.3-2.4 2-31.1-35.5h-8.8v8.8l35.4 31-2 2.5-34.3-26.3v7.1l32.5 21.7q-5.2 7.8-7.1 17.2L66.3 223l-5.1 5 42.9 5.7q-.3 1.6-.3 3.1l-47-3-6.2 6.2 6.2 6.2 47-3.1.3 3.1-42.9 5.7 5 5 38.4-7.6a48 48 0 0 0 7.1 17.2l-32.5 21.7v7.2l34.3-26.3 2 2.4-35.4 31v8.8H89l31-35.4 2.5 2L96 312.2h7.2l21.7-32.5q7.8 5.2 17.2 7.1l-7.6 38.4 5 5 5.7-42.9q1.5.3 3.1.3l-3 47 6.1 6.2 6.3-6.2-3.1-47 3-.3 5.7 43 5.1-5.1-7.6-38.4a48 48 0 0 0 17.2-7.1l21.7 32.5h7.2l-26.4-34.3 2.4-2 31.1 35.4h8.8v-8.8l-35.4-31 2-2.4 34.3 26.3v-7.2l-32.5-21.7q5.2-7.8 7.1-17.2l38.3 7.6 5.1-5-42.9-5.7q.3-1.5.3-3.1l47 3 6.2-6.1-6.2-6.2-47 3-.3-3 42.9-5.7-5-5-38.4 7.5a48 48 0 0 0-7.1-17.2l32.5-21.7v-7.1l-34.3 26.3-2-2.4 35.4-31v-8.9H214l-31 35.5-2.5-2 26.4-34.3h-7.2L178 200.2q-7.8-5.2-17.2-7.1l7.6-38.3-5-5-5.7 42.8-3.1-.3 3-47z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/public/svgs/flags/PLN.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
<g fill-rule="evenodd">
<path fill="#fff" d="M640 480H0V0h640z"/>
<path fill="#dc143c" d="M640 480H0V240h640z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 219 B

src/public/svgs/flags/RON.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ro" viewBox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#00319c" d="M0 0h213.3v480H0z"/>
<path fill="#ffde00" d="M213.3 0h213.4v480H213.3z"/>
<path fill="#de2110" d="M426.7 0H640v480H426.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

src/public/svgs/flags/SEK.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
<path fill="#005293" d="M0 0h640v480H0z"/>
<path fill="#fecb00" d="M176 0v192H0v96h176v192h96V288h368v-96H272V0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

src/public/svgs/flags/SGD.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sg" viewBox="0 0 640 480">
<defs>
<clipPath id="sg-a">
<path fill-opacity=".7" d="M0 0h640v480H0z"/>
</clipPath>
</defs>
<g fill-rule="evenodd" clip-path="url(#sg-a)">
<path fill="#fff" d="M-20 0h720v480H-20z"/>
<path fill="#df0000" d="M-20 0h720v240H-20z"/>
<path fill="#fff" d="M146 40.2a84.4 84.4 0 0 0 .8 165.2 86 86 0 0 1-106.6-59 86 86 0 0 1 59-106c16-4.6 30.8-4.7 46.9-.2z"/>
<path fill="#fff" d="m133 110 4.9 15-13-9.2-12.8 9.4 4.7-15.2-12.8-9.3 15.9-.2 5-15 5 15h15.8zm17.5 52 5 15.1-13-9.2-12.9 9.3 4.8-15.1-12.8-9.4 15.9-.1 4.9-15.1 5 15h16zm58.5-.4 4.9 15.2-13-9.3-12.8 9.3 4.7-15.1-12.8-9.3 15.9-.2 5-15 5 15h15.8zm17.4-51.6 4.9 15.1-13-9.2-12.8 9.3 4.8-15.1-12.9-9.4 16-.1 4.8-15.1 5 15h16zm-46.3-34.3 5 15.2-13-9.3-12.9 9.4 4.8-15.2-12.8-9.4 15.8-.1 5-15.1 5 15h16z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 889 B

src/public/svgs/flags/THB.svg
+7
View File
@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-th" viewBox="0 0 640 480">
<g fill-rule="evenodd">
<path fill="#f4f5f8" d="M0 0h640v480H0z"/>
<path fill="#2d2a4a" d="M0 162.5h640v160H0z"/>
<path fill="#a51931" d="M0 0h640v82.5H0zm0 400h640v80H0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

src/public/svgs/flags/TRY.svg
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-tr" viewBox="0 0 640 480">
<g fill-rule="evenodd">
<path fill="#e30a17" d="M0 0h640v480H0z"/>
<path fill="#fff" d="M407 247.5c0 66.2-54.6 119.9-122 119.9s-122-53.7-122-120 54.6-119.8 122-119.8 122 53.7 122 119.9"/>
<path fill="#e30a17" d="M413 247.5c0 53-43.6 95.9-97.5 95.9s-97.6-43-97.6-96 43.7-95.8 97.6-95.8 97.6 42.9 97.6 95.9z"/>
<path fill="#fff" d="m430.7 191.5-1 44.3-41.3 11.2 40.8 14.5-1 40.7 26.5-31.8 40.2 14-23.2-34.1 28.3-33.9-43.5 12-25.8-37z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 549 B

src/public/svgs/flags/ZAR.svg
+17
View File
@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-za" viewBox="0 0 640 480">
<defs>
<clipPath id="za-a">
<path fill-opacity=".7" d="M-71.9 0h682.7v512H-71.9z"/>
</clipPath>
</defs>
<g clip-path="url(#za-a)" transform="translate(67.4)scale(.93748)">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#000001" d="M-71.9 407.8V104.4L154 256.1z"/>
<path fill="#000c8a" d="m82.2 512.1 253.6-170.6H696V512H82.2z"/>
<path fill="#e1392d" d="M66 0h630v170.8H335.7S69.3-1.7 66 0"/>
<path fill="#ffb915" d="M-71.9 64v40.4L154 256-72 407.8v40.3l284.5-192z"/>
<path fill="#007847" d="M-71.9 64V0h95l301.2 204h371.8v104.2H324.3L23 512h-94.9v-63.9l284.4-192L-71.8 64z"/>
<path fill="#fff" d="M23 0h59.2l253.6 170.7H696V204H324.3zm0 512.1h59.2l253.6-170.6H696v-33.2H324.3L23 512z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B