icon-extract

name	icon-extract
description	Extract SVG icons from FileMaker layout objects (Button, ButtonBar) and save as individual SVG files. Use when the developer says "extract icons", "show me the icons", "get the icons from", "export the SVGs", "what icons are in this", or wants to inspect or reuse icons embedded in FM layout XML.

Icon Extract

Extract embedded SVG icons from FileMaker layout object XML. Parses <Stream><Type>SVG </Type><HexData>...</HexData></Stream> elements inside Button and ButtonBar objects, decodes the hex-encoded SVGs, and saves them as individual files.

This skill uses no external dependencies — it is stdlib-only Python.

---

Step 1: Determine the input source

The developer may provide input in one of three ways:

A) File in sandbox — the developer has placed or named an XML file:

python3 agent/scripts/fm_icon_extract.py agent/sandbox/<filename>.xml --json

B) Clipboard — the developer says the layout object is on the clipboard. Read it via the companion server:

curl -s http://local.hub:8765/clipboard | python3 -c "
import json, sys
data = json.load(sys.stdin)
if data.get('success'):
    with open('agent/sandbox/_clipboard_input.xml', 'w') as f:
        f.write(data['xml'])
    print('Saved clipboard content to agent/sandbox/_clipboard_input.xml')
else:
    print('ERROR:', data.get('error', 'Unknown error'), file=sys.stderr)
    sys.exit(1)
"

If the companion server is not reachable, try the Docker-internal hostname:

curl -s http://host.docker.internal:8765/clipboard | python3 -c "..."

If neither works, instruct the developer:

Please run this command to save the clipboard content:

python3 agent/scripts/clipboard.py read agent/sandbox/_clipboard_input.xml

Then proceed with the saved file.

C) XML text pasted directly — save to agent/sandbox/_clipboard_input.xml and proceed.

---

Step 2: Extract icons

Run the extraction script:

python3 agent/scripts/fm_icon_extract.py agent/sandbox/<input>.xml --json

This outputs a JSON array with one entry per icon:

{
  "index": 0,
  "button_name": "NAV:Dashboard",
  "label": "Dashboard",
  "is_stroke": false,
  "has_fm_fill": true,
  "viewbox": "0 0 24 24",
  "stream_size": 941,
  "byte_size": 941
}

Present a summary table to the developer:

#	Button Name	Label	Format	ViewBox
0	NAV:Dashboard	Dashboard	filled	0 0 24 24
1	NAV:Company	Companies	filled	0 0 40 42.67
...

Note whether icons are stroke-based (would need conversion for FM) or already filled.

---

Step 3: Save individual SVG files (if requested)

If the developer wants individual files:

python3 agent/scripts/fm_icon_extract.py agent/sandbox/<input>.xml --output-dir agent/sandbox/icons/

Files are named from the button label (e.g., dashboard.svg, companies.svg). Duplicates get a numeric suffix.

Report the saved file paths to the developer.

---

Step 4: Display or describe icons

If the developer asks what an icon looks like, read the SVG content from the extracted file and describe its visual appearance based on the SVG shapes (paths, rects, circles, etc.). Common patterns:

• Grid of rectangles = dashboard/spreadsheet
• Person silhouette = contacts/user
• Building shape = company
• Gear/cog = settings
• Document/page = reports
• Truck = shipments
• Box = orders/packages

---

Notes

• The extraction script is read-only — it never modifies the input XML.
• The icon-swap skill depends on this extraction capability for its workflow.
• All extracted SVGs preserve the original hex encoding fidelity — re-encoding produces identical bytes.
• The GLPH stream (typically 01) is metadata that pairs with each SVG stream. The extraction report includes it for reference.