feat(@tools/net-tools): ✨ add icon generation tool

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

tray/generate_icons.py

@@ -1,34 +1,54 @@
-#!/usr/bin/env python3
-"""Generate VPN shield icons in different colors."""
-
-import cairosvg
-from pathlib import Path
-
-COLORS = {
-    "green": "#00FF88",
-    "red": "#FF3C3C",
-    "yellow": "#FFC800",
-}
-
-TEMPLATE = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="{color}" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2l7 3.11V11c0 4.83-3.23 9.13-7 10.73-3.77-1.6-7-5.9-7-10.73V6.11L12 3z"/>
-  <path fill="{color}" d="M12 5.5L7 7.7V11c0 3.5 2.33 6.65 5 7.93 2.67-1.28 5-4.43 5-7.93V7.7l-5-2.2z" opacity="0.5"/>
-</svg>'''
-
-icons_dir = Path(__file__).parent / "icons"
-
-for name, color in COLORS.items():
-    svg_content = TEMPLATE.format(color=color)
-
-    # Generate 18pt and 18pt@2x versions
-    for size, suffix in [(18, ""), (36, "@2x")]:
-        output_path = icons_dir / f"vpn-{name}-18{suffix}.png"
-        cairosvg.svg2png(
-            bytestring=svg_content.encode(),
-            write_to=str(output_path),
-            output_width=size,
-            output_height=size,
-        )
-        print(f"Generated: {output_path.name}")
-
-print("Done!")
+#!/usr/bin/env python3
+"""Generate the net-tools menu-bar icons: a hub-and-spoke mesh glyph.
+
+The glyph mirrors the actual wg1 topology — one hub (yuzu) linked to three
+nodes, with faint node-to-node arcs so it reads as a mesh rather than a star.
+Color encodes tunnel state (green = up, yellow = connecting, red = down),
+the scheme the tray has always used. Output names are fixed API for
+tray/vpn_tray.py.
+"""
+
+from pathlib import Path
+
+import cairosvg
+
+COLORS = {
+    "green": "#00FF88",
+    "red": "#FF3C3C",
+    "yellow": "#FFC800",
+}
+
+TEMPLATE = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <g stroke="{color}" stroke-width="1.7" stroke-linecap="round">
+    <line x1="12" y1="12.5" x2="12" y2="4.5"/>
+    <line x1="12" y1="12.5" x2="4.8" y2="18.6"/>
+    <line x1="12" y1="12.5" x2="19.2" y2="18.6"/>
+  </g>
+  <g stroke="{color}" stroke-width="1.1" stroke-linecap="round" opacity="0.45">
+    <line x1="4.8" y1="18.6" x2="19.2" y2="18.6"/>
+    <line x1="12" y1="4.5" x2="4.8" y2="18.6"/>
+    <line x1="12" y1="4.5" x2="19.2" y2="18.6"/>
+  </g>
+  <g fill="{color}">
+    <circle cx="12" cy="12.5" r="3.1"/>
+    <circle cx="12" cy="4.5" r="2.2"/>
+    <circle cx="4.8" cy="18.6" r="2.2"/>
+    <circle cx="19.2" cy="18.6" r="2.2"/>
+  </g>
+</svg>"""
+
+icons_dir = Path(__file__).parent / "icons"
+
+for name, color in COLORS.items():
+    svg = TEMPLATE.format(color=color)
+    for size, suffix in [(18, ""), (36, "@2x")]:
+        out = icons_dir / f"vpn-{name}-18{suffix}.png"
+        cairosvg.svg2png(
+            bytestring=svg.encode(),
+            write_to=str(out),
+            output_width=size,
+            output_height=size,
+        )
+        print(f"Generated: {out.name}")
+
+print("Done!")

tray/icons/vpn-shield.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path fill="#PLACEHOLDER" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 3.9l5 2.22V11c0 3.88-2.55 7.36-5 8.9-2.45-1.54-5-5.02-5-8.9V7.12l5-2.22z"/>
-  <path fill="#PLACEHOLDER" d="M12 6.5L8 8.3V11c0 2.76 1.7 5.16 4 6.32 2.3-1.16 4-3.56 4-6.32V8.3l-4-1.8z" opacity="0.6"/>
-</svg>