skills.rest
vchelaru
vchelaruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gum-icons

Routes icon authoring to the correct Gum pipeline across WPF chrome, tree view, and Forms runtime.

614|78|Updated Mar 11, 2015
Search Tags:#icons#svg#WPF#xaml#themING#gum#Code generation
One-click install
npx skills add https://github.com/vchelaru/Gum --skill gum-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gum-icons
Source: https://github.com/vchelaru/Gum/tree/main/.claude/skills/gum-icons
Command: npx skills add https://github.com/vchelaru/Gum --skill gum-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Gum has three independent icon pipelines (WPF chrome SVG icons, tree-view PNG image lists, and Forms runtime sprite sheets), and choosing the wrong one produces icons that never render or ignore theming. This Skill identifies the correct pipeline before any icon work begins.

Core Features & Use Cases

  • Pipeline Routing: Maps each icon location (variable grid, tree view, in-game Forms UI) to its correct format, runtime representation, and theming mechanism.
  • GumIcon Authoring Workflow: Documents the SVG authoring spec (32x32 viewBox, 2px live area, opacity-based two-tone) and the GumFigmaIconRipper regeneration step that produces GumIcons.xaml and GumIconKind.g.cs.
  • Migration Guidance: Explains how to replace legacy FluentIcons.Wpf usage with GumIcon and lists gotchas such as the ripper not being wired into MSBuild.
  • Use Case: A developer adding a dock-alignment icon to the Gum tool drops an SVG into Gum/Content/Svg, runs the ripper from its own directory, commits the regenerated theme files, and references the icon via <controls:GumIcon Icon="DockLeft"/>.

Quick Start

Ask the AI to add a new icon to the Gum WPF tool and it will route you to the correct pipeline and walk through authoring the SVG and running GumFigmaIconRipper.

Frequently Asked Questions about gum-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new icon to the Gum WPF tool?▼

Author an SVG with a 32x32 viewBox and 2px live area, drop it into Gum/Content/Svg, then run GumFigmaIconRipper from its own directory with dotnet run. Commit the SVG plus the regenerated GumIcons.xaml and GumIconKind.g.cs, then reference it with <controls:GumIcon Icon="YourIconName"/>.

What is the difference between GumIcon and tree-view icons in Gum?▼

GumIcon is a WPF Control rendering PathGeometry resources for tool chrome, themed via Foreground. Tree-view icons are white-on-transparent PNGs in an ImageList, indexed by ImageIndex constants and tinted from theme colors; the two pipelines are not interchangeable.

Can I use FluentIcons.Wpf for new icons in Gum?▼

FluentIcons.Wpf is treated as legacy in Gum. New chrome icons should use GumIcon with an authored SVG, and existing FluentIcon usages should be migrated opportunistically by replacing them with GumIcon equivalents.

Why does my new GumIcon not appear after adding the SVG?▼

The GumFigmaIconRipper is not wired into MSBuild, so GumIcons.xaml and GumIconKind.g.cs stay stale until you run it manually from the Gum/GumFigmaIconRipper directory. Also verify your SVG content stays within the 2..30 live area, since anything outside is silently clipped.

How do I add an icon to in-game Forms controls in Gum?▼

In-game Forms icons come from a sprite sheet bundled with the active styling, with coordinates in the Icons table referenced by sprite name. This is a runtime concern handled by the Forms styling system, separate from the WPF tool icon pipelines.

Related Skills

Explore More Software Engineering Skills→
CopilotKitCopilotKit
1.5k

SVG Diagram Generation

Generate inline SVG diagrams with a 680px viewBox and design rules.

Official
Advanced
vchelaruvchelaru
597

gum-tool-variable-grid

Guide developers through Gum's Variables tab and DataUiGrid system.

Community
Basic
DevonSteeDevonStee
3

Android Theme Transition Safety

Guide Android theme transitions with explicit state passing and setColorFilter tinting.

Community
Intermediate
MCERQUAMCERQUA
1

icon-generation

Generate custom icons from descriptions or search over 1,700 Lucide icons.

Community
Intermediate