feat: add icon color variant generation script and 5 variants
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
33
scripts/generate-icon-variants.sh
Executable file
33
scripts/generate-icon-variants.sh
Executable file
@@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
SOURCE="$ROOT_DIR/src-tauri/icons/icon.svg"
|
||||
OUT_DIR="$ROOT_DIR/src-tauri/icons/variants"
|
||||
|
||||
mkdir -p "$OUT_DIR"
|
||||
|
||||
# Blue is the base template — copy as-is
|
||||
cp "$SOURCE" "$OUT_DIR/icon-blue.svg"
|
||||
|
||||
# Each variant substitutes three accent hex values:
|
||||
# #60a5fa = blade tip (lighter)
|
||||
# #2563eb = blade pivot (darker)
|
||||
# #3b82f6 = cut edge accent
|
||||
create_variant() {
|
||||
local name="$1" tip="$2" pivot="$3" accent="$4"
|
||||
sed \
|
||||
-e "s/#60a5fa/$tip/g" \
|
||||
-e "s/#2563eb/$pivot/g" \
|
||||
-e "s/#3b82f6/$accent/g" \
|
||||
"$SOURCE" > "$OUT_DIR/icon-${name}.svg"
|
||||
echo "Created icon-${name}.svg"
|
||||
}
|
||||
|
||||
create_variant "purple" "#c084fc" "#7c3aed" "#a855f7"
|
||||
create_variant "green" "#34d399" "#059669" "#10b981"
|
||||
create_variant "orange" "#fb923c" "#ea580c" "#f97316"
|
||||
create_variant "mono" "#d4d4d8" "#71717a" "#a1a1aa"
|
||||
|
||||
echo "All variants generated in $OUT_DIR"
|
||||
61
src-tauri/icons/variants/icon-blue.svg
Normal file
61
src-tauri/icons/variants/icon-blue.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#2563eb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background: solid zinc-900, full square -->
|
||||
<rect width="512" height="512" fill="#18181b"/>
|
||||
|
||||
<!-- Film strip - left half (offset down-left for separation effect) -->
|
||||
<g transform="translate(-3, 3)">
|
||||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Film strip - right half (offset up-right for separation effect) -->
|
||||
<g transform="translate(3, -3)">
|
||||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Cut accent line along the diagonal gap -->
|
||||
<line x1="269" y1="216" x2="243" y2="296" stroke="#3b82f6" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Scissors (symmetric, rotated 20° clockwise for diagonal cut alignment) -->
|
||||
<g transform="rotate(20, 256, 256)">
|
||||
<!-- Blade B cutting portion (rendered first = behind) -->
|
||||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||||
<!-- Blade A cutting portion (rendered second = in front, blades cross) -->
|
||||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||||
|
||||
<!-- Handle A (behind at handle end) -->
|
||||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||||
<!-- Handle B (in front at handle end, crossing) -->
|
||||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||||
|
||||
<!-- Ring A (lower-left) -->
|
||||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
<!-- Ring B (lower-right) -->
|
||||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
|
||||
<!-- Pivot screw -->
|
||||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
61
src-tauri/icons/variants/icon-green.svg
Normal file
61
src-tauri/icons/variants/icon-green.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||||
<stop offset="0%" stop-color="#34d399"/>
|
||||
<stop offset="100%" stop-color="#059669"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background: solid zinc-900, full square -->
|
||||
<rect width="512" height="512" fill="#18181b"/>
|
||||
|
||||
<!-- Film strip - left half (offset down-left for separation effect) -->
|
||||
<g transform="translate(-3, 3)">
|
||||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Film strip - right half (offset up-right for separation effect) -->
|
||||
<g transform="translate(3, -3)">
|
||||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Cut accent line along the diagonal gap -->
|
||||
<line x1="269" y1="216" x2="243" y2="296" stroke="#10b981" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Scissors (symmetric, rotated 20° clockwise for diagonal cut alignment) -->
|
||||
<g transform="rotate(20, 256, 256)">
|
||||
<!-- Blade B cutting portion (rendered first = behind) -->
|
||||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||||
<!-- Blade A cutting portion (rendered second = in front, blades cross) -->
|
||||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||||
|
||||
<!-- Handle A (behind at handle end) -->
|
||||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||||
<!-- Handle B (in front at handle end, crossing) -->
|
||||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||||
|
||||
<!-- Ring A (lower-left) -->
|
||||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
<!-- Ring B (lower-right) -->
|
||||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
|
||||
<!-- Pivot screw -->
|
||||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
61
src-tauri/icons/variants/icon-mono.svg
Normal file
61
src-tauri/icons/variants/icon-mono.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||||
<stop offset="0%" stop-color="#d4d4d8"/>
|
||||
<stop offset="100%" stop-color="#71717a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background: solid zinc-900, full square -->
|
||||
<rect width="512" height="512" fill="#18181b"/>
|
||||
|
||||
<!-- Film strip - left half (offset down-left for separation effect) -->
|
||||
<g transform="translate(-3, 3)">
|
||||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Film strip - right half (offset up-right for separation effect) -->
|
||||
<g transform="translate(3, -3)">
|
||||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Cut accent line along the diagonal gap -->
|
||||
<line x1="269" y1="216" x2="243" y2="296" stroke="#a1a1aa" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Scissors (symmetric, rotated 20° clockwise for diagonal cut alignment) -->
|
||||
<g transform="rotate(20, 256, 256)">
|
||||
<!-- Blade B cutting portion (rendered first = behind) -->
|
||||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||||
<!-- Blade A cutting portion (rendered second = in front, blades cross) -->
|
||||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||||
|
||||
<!-- Handle A (behind at handle end) -->
|
||||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||||
<!-- Handle B (in front at handle end, crossing) -->
|
||||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||||
|
||||
<!-- Ring A (lower-left) -->
|
||||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
<!-- Ring B (lower-right) -->
|
||||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
|
||||
<!-- Pivot screw -->
|
||||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
61
src-tauri/icons/variants/icon-orange.svg
Normal file
61
src-tauri/icons/variants/icon-orange.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||||
<stop offset="0%" stop-color="#fb923c"/>
|
||||
<stop offset="100%" stop-color="#ea580c"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background: solid zinc-900, full square -->
|
||||
<rect width="512" height="512" fill="#18181b"/>
|
||||
|
||||
<!-- Film strip - left half (offset down-left for separation effect) -->
|
||||
<g transform="translate(-3, 3)">
|
||||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Film strip - right half (offset up-right for separation effect) -->
|
||||
<g transform="translate(3, -3)">
|
||||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Cut accent line along the diagonal gap -->
|
||||
<line x1="269" y1="216" x2="243" y2="296" stroke="#f97316" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Scissors (symmetric, rotated 20° clockwise for diagonal cut alignment) -->
|
||||
<g transform="rotate(20, 256, 256)">
|
||||
<!-- Blade B cutting portion (rendered first = behind) -->
|
||||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||||
<!-- Blade A cutting portion (rendered second = in front, blades cross) -->
|
||||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||||
|
||||
<!-- Handle A (behind at handle end) -->
|
||||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||||
<!-- Handle B (in front at handle end, crossing) -->
|
||||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||||
|
||||
<!-- Ring A (lower-left) -->
|
||||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
<!-- Ring B (lower-right) -->
|
||||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
|
||||
<!-- Pivot screw -->
|
||||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
61
src-tauri/icons/variants/icon-purple.svg
Normal file
61
src-tauri/icons/variants/icon-purple.svg
Normal file
@@ -0,0 +1,61 @@
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
|
||||
<stop offset="0%" stop-color="#c084fc"/>
|
||||
<stop offset="100%" stop-color="#7c3aed"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background: solid zinc-900, full square -->
|
||||
<rect width="512" height="512" fill="#18181b"/>
|
||||
|
||||
<!-- Film strip - left half (offset down-left for separation effect) -->
|
||||
<g transform="translate(-3, 3)">
|
||||
<polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Film strip - right half (offset up-right for separation effect) -->
|
||||
<g transform="translate(3, -3)">
|
||||
<polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
|
||||
<!-- Sprocket holes: top row -->
|
||||
<rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<!-- Sprocket holes: bottom row -->
|
||||
<rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
<rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
|
||||
</g>
|
||||
|
||||
<!-- Cut accent line along the diagonal gap -->
|
||||
<line x1="269" y1="216" x2="243" y2="296" stroke="#a855f7" stroke-width="2" opacity="0.6"/>
|
||||
|
||||
<!-- Scissors (symmetric, rotated 20° clockwise for diagonal cut alignment) -->
|
||||
<g transform="rotate(20, 256, 256)">
|
||||
<!-- Blade B cutting portion (rendered first = behind) -->
|
||||
<polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
|
||||
<!-- Blade A cutting portion (rendered second = in front, blades cross) -->
|
||||
<polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
|
||||
|
||||
<!-- Handle A (behind at handle end) -->
|
||||
<polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
|
||||
<!-- Handle B (in front at handle end, crossing) -->
|
||||
<polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
|
||||
|
||||
<!-- Ring A (lower-left) -->
|
||||
<circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
<!-- Ring B (lower-right) -->
|
||||
<circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
|
||||
|
||||
<!-- Pivot screw -->
|
||||
<circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Reference in New Issue
Block a user