From 288dfe7c701c7555f3131bbed80a3f833847e849 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 13 Oct 2024 00:47:10 +0200
Subject: [PATCH] custom windmill icon2

---
 .../lib/components/icons/WindmillIcon2.svelte | 111 +++++++++++-------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/icons/WindmillIcon2.svelte b/frontend/src/lib/components/icons/WindmillIcon2.svelte
index 568e4cb05f..e274fbded0 100644
--- a/frontend/src/lib/components/icons/WindmillIcon2.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon2.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { customIcon } from './store'
+
 	export let white = false
 	export let size = '24px'
 	export let color: string | undefined = undefined
@@ -105,50 +107,69 @@
 	$: color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
 </script>
 
-<!-- SVG Icon with customizable color -->
-<svg
-	class={$$props.class}
-	class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
-	class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
-	class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
-	class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
-	version="1.1"
-	id="Calque_1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	width={size}
-	height={size}
-	viewBox="0 0 256 256"
-	style="enable-background:new 0 0 256 256;"
-	xml:space="preserve"
->
-	<g>
-		<!-- Use color or fallback to defaults (white or blue) -->
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22"
+{#if customIcon.white || customIcon.normal}
+	{#if white}
+		<img
+			src={customIcon.white}
+			alt="Windmill Custom icon"
+			width={size}
+			height={size}
+			class={$$props.class}
 		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02"
+	{:else}
+		<img
+			src={customIcon.normal}
+			alt="Windmill Custom icon"
+			width={size}
+			height={size}
+			class={$$props.class}
 		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46"
-		/>
-		<polygon
-			fill={color || (white ? '#ffffff' : '#3b82f6')}
-			points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22"
-		/>
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21"
-		/>
-		<polygon
-			fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
-			points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46"
-		/>
-	</g>
-</svg>
+	{/if}
+{:else}
+	<svg
+		class={$$props.class}
+		class:animate-[spin_2s_linear_infinite]={spin === 'veryfast'}
+		class:animate-[spin_5s_linear_infinite]={spin === 'fast'}
+		class:animate-[spin_15s_linear_infinite]={spin === 'medium'}
+		class:animate-[spin_50s_linear_infinite]={spin === 'slow'}
+		version="1.1"
+		id="Calque_1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		x="0px"
+		y="0px"
+		width={size}
+		height={size}
+		viewBox="0 0 256 256"
+		style="enable-background:new 0 0 256 256;"
+		xml:space="preserve"
+	>
+		<g>
+			<!-- Use color or fallback to defaults (white or blue) -->
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="134.78,14.22 114.31,48.21 101.33,69.75 158.22,69.75 177.97,36.95 191.67,14.22"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="227.55,69.75 186.61,69.75 101.33,69.75 129.78,119.02 158.16,119.02 228.61,119.02 256,119.02"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="136.93,132.47 116.46,167.93 73.82,241.78 130.71,241.78 144.9,217.2 180.13,156.18 193.82,132.46"
+			/>
+			<polygon
+				fill={color || (white ? '#ffffff' : '#3b82f6')}
+				points="121.7,131.95 101.23,96.49 58.59,22.63 30.15,71.91 44.34,96.49 79.57,157.5 93.26,181.22"
+			/>
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="64.81,131.95 25.15,131.21 0,130.74 28.44,180.01 66.73,180.72 93.26,181.21"
+			/>
+			<polygon
+				fill={lessSaturatedColor || (white ? '#cccccc' : '#bcd4fc')}
+				points="165.38,181.74 184.58,216.46 196.75,238.47 225.19,189.2 206.66,155.69 193.83,132.46"
+			/>
+		</g>
+	</svg>
+{/if}