sam1902/Skwik
sam1902/Skwik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore(logo): replace squirrel SVG with the 📐 emoji

Browse Source 
SkwikLogo renders 📐 in an inline span sized via the existing `size`
prop (font-size = round(size * 0.9)). Favicon becomes an SVG with a
single <text> element rendering the same emoji.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samuel Prevost 2026-04-25 10:04:00 +02:00
parent fe61ba3cf2
commit 923e969bdf
2 changed files with 17 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
public/favicon.svg
View File

@ -1,43 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32">
<!-- Simplified SkwikLogo for favicon — squirrel head with hard hat and goggles -->
<!-- Head -->
<ellipse cx="32" cy="36" rx="16" ry="17" fill="#1a1a1a"/>
<!-- Ear tufts -->
<path d="M16 24 Q10 14 6 17 Q5 22 14 26" fill="#1a1a1a"/>
<path d="M48 24 Q54 14 58 17 Q59 22 50 26" fill="#1a1a1a"/>
<!-- Cheeks -->
<ellipse cx="20" cy="40" rx="5" ry="4" fill="#2a2a2a"/>
<ellipse cx="44" cy="40" rx="5" ry="4" fill="#2a2a2a"/>
<!-- Eyes -->
<circle cx="25" cy="34" r="4" fill="#fff"/>
<circle cx="39" cy="34" r="4" fill="#fff"/>
<circle cx="26" cy="33.5" r="2.4" fill="#1a1a1a"/>
<circle cx="40" cy="33.5" r="2.4" fill="#1a1a1a"/>
<!-- Eye shine -->
<circle cx="27" cy="32.5" r="0.9" fill="#fff"/>
<circle cx="41" cy="32.5" r="0.9" fill="#fff"/>
<!-- Nose -->
<ellipse cx="32" cy="41" rx="2.2" ry="1.5" fill="#555"/>
<!-- Mouth -->
<path d="M29.5 44 Q32 46.5 34.5 44" fill="none" stroke="#555" stroke-width="1" stroke-linecap="round"/>
<!-- Safety goggles -->
<path d="M16 28 Q24 24 32 25.5 Q40 24 48 28" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round"/>
<ellipse cx="24" cy="28" rx="5" ry="3.5" fill="none" stroke="#f59e0b" stroke-width="2"/>
<ellipse cx="40" cy="28" rx="5" ry="3.5" fill="none" stroke="#f59e0b" stroke-width="2"/>
<path d="M29 28 Q32 26.5 35 28" fill="none" stroke="#f59e0b" stroke-width="1.5"/>
<ellipse cx="24" cy="28" rx="3.5" ry="2" fill="#f59e0b" opacity="0.15"/>
<ellipse cx="40" cy="28" rx="3.5" ry="2" fill="#f59e0b" opacity="0.15"/>
<!-- Hard hat -->
<path d="M12 22 Q12 8 32 6 Q52 8 52 22" fill="none" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Hat brim -->
<path d="M10 22 L54 22" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round"/>
<!-- Hat dome highlight -->
<path d="M24 12 Q32 9 40 12" fill="none" stroke="#fbbf24" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<text
x="50%"
y="50%"
text-anchor="middle"
dominant-baseline="central"
font-size="56"
>📐</text>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 214 B

277
src/components/SkwikLogo.vue
View File

@ -10,271 +10,14 @@ withDefaults(
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
:width="size"
:height="size"
aria-label="Skwik squirrel logo"
>
<!-- Tail (fluffy, curling up behind) -->
<path
d="M50 52 Q58 40 54 28 Q52 22 48 20
Q55 18 56 12 Q56 8 52 10
Q48 12 46 18"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
opacity="0.7"
/>
<!-- Body -->
<ellipse
cx="32"
cy="46"
rx="12"
ry="10"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
<!-- Head -->
<ellipse
cx="32"
cy="28"
rx="12"
ry="13"
fill="none"
stroke="currentColor"
stroke-width="2"
/>
<!-- Ear tufts -->
<path
d="M22 18 Q18 10 14 12 Q12 16 20 20"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M42 18 Q46 10 50 12 Q52 16 44 20"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Eyes -->
<circle
cx="27"
cy="26"
r="3"
fill="currentColor"
/>
<circle
cx="37"
cy="26"
r="3"
fill="currentColor"
/>
<!-- Eye shine -->
<circle cx="28.2" cy="25" r="1" fill="var(--background, #fff)" />
<circle cx="38.2" cy="25" r="1" fill="var(--background, #fff)" />
<!-- Nose -->
<ellipse
cx="32"
cy="32"
rx="2"
ry="1.5"
fill="currentColor"
/>
<!-- Cheeks -->
<ellipse
cx="24"
cy="32"
rx="4"
ry="3"
fill="none"
stroke="currentColor"
stroke-width="1"
opacity="0.3"
/>
<ellipse
cx="40"
cy="32"
rx="4"
ry="3"
fill="none"
stroke="currentColor"
stroke-width="1"
opacity="0.3"
/>
<!-- Mouth -->
<path
d="M30 34 Q32 36 34 34"
fill="none"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
/>
<!-- Arms holding ruler -->
<path
d="M20 42 L12 38"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M44 42 L52 38"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
<!-- Ruler (held diagonally) -->
<rect
x="4"
y="34"
width="22"
height="4"
rx="0.5"
fill="none"
stroke="currentColor"
stroke-width="1.5"
transform="rotate(-15 15 36)"
/>
<!-- Ruler tick marks -->
<line
x1="8" y1="34" x2="8" y2="36"
stroke="currentColor"
stroke-width="1"
transform="rotate(-15 15 36)"
/>
<line
x1="12" y1="34" x2="12" y2="36"
stroke="currentColor"
stroke-width="1"
transform="rotate(-15 15 36)"
/>
<line
x1="16" y1="34" x2="16" y2="36"
stroke="currentColor"
stroke-width="1"
transform="rotate(-15 15 36)"
/>
<line
x1="20" y1="34" x2="20" y2="36"
stroke="currentColor"
stroke-width="1"
transform="rotate(-15 15 36)"
/>
<!-- Safety goggles on forehead -->
<path
d="M22 20 Q27 17 32 18 Q37 17 42 20"
fill="none"
stroke="#f59e0b"
stroke-width="2"
stroke-linecap="round"
/>
<!-- Goggle lenses -->
<ellipse
cx="26"
cy="20"
rx="3.5"
ry="2.5"
fill="none"
stroke="#f59e0b"
stroke-width="1.5"
/>
<ellipse
cx="38"
cy="20"
rx="3.5"
ry="2.5"
fill="none"
stroke="#f59e0b"
stroke-width="1.5"
/>
<!-- Goggle bridge -->
<path
d="M29.5 20 Q32 19 34.5 20"
fill="none"
stroke="#f59e0b"
stroke-width="1.2"
/>
<!-- Goggle lens tint -->
<ellipse
cx="26"
cy="20"
rx="2.5"
ry="1.5"
fill="#f59e0b"
opacity="0.15"
/>
<ellipse
cx="38"
cy="20"
rx="2.5"
ry="1.5"
fill="#f59e0b"
opacity="0.15"
/>
<!-- Hard hat -->
<path
d="M18 16 Q18 6 32 5 Q46 6 46 16"
fill="none"
stroke="#f59e0b"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Hat brim -->
<path
d="M16 16 L48 16"
stroke="#f59e0b"
stroke-width="2"
stroke-linecap="round"
/>
<!-- Hat dome highlight -->
<path
d="M26 9 Q32 7 38 9"
fill="none"
stroke="#fbbf24"
stroke-width="1.5"
stroke-linecap="round"
opacity="0.6"
/>
<!-- Feet -->
<ellipse
cx="26"
cy="56"
rx="4"
ry="2"
fill="none"
stroke="currentColor"
stroke-width="1.5"
/>
<ellipse
cx="38"
cy="56"
rx="4"
ry="2"
fill="none"
stroke="currentColor"
stroke-width="1.5"
/>
</svg>
<span
class="inline-flex items-center justify-center leading-none select-none"
:style="{
width: size + 'px',
height: size + 'px',
fontSize: Math.round(size * 0.9) + 'px',
}"
aria-label="Skwik logo"
role="img"
>📐</span>
</template>