starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-10-26 00:03:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom windmill icon2

Browse Source
This commit is contained in:
Ruben Fiszel
2024-10-13 00:47:10 +02:00
parent 8867260e43
commit 288dfe7c70
1 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/icons/WindmillIcon2.svelte
+66 -45
View File
@@ -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}