version: "1.0.0" name: figma-from-code-discovery-assets description: Subagent for figma-from-code Phase 0b. Discovers all Lucide icons and SVG file assets imported across the codebase via static analysis. Extracts SVG markup and maps which components use which icons. No dev server or Figma access needed. model: claude-sonnet-4-5

Skill: Icon & Asset Discovery

Discovers all Lucide icons and SVG file assets imported across the codebase, extracts their SVG markup, and maps which components use which icons. This is pure static analysis — no dev server or Figma access needed.

When to Use

• Before figma-from-code Phase 3 (icon preamble builds Figma icon components from this data)
• Standalone audit of icon and asset usage across the codebase
• When resuming a build and icons.json is missing

Prerequisites

• Source directory exists at {sourceDir} (the directory containing the project's component source files)
• node_modules/lucide-react installed (for resolving icon SVG data; only required when config.iconLibrary is lucide-react)

Placeholders like {sourceDir} resolve from state.json → config. When config.iconLibrary is null or the lucide-react package is absent, icon extraction is skipped and an empty icons array is written to icons.json — the phase still completes and records totalIcons: 0 in the summary.

Required Inputs

Output Files

Written to .temp/figma-from-code/:

icons.json structure

{
  "icons": [
    {
      "name": "Check",
      "elements": [["path", { "d": "M20 6 9 17l-5-5" }]],
      "svgString": "<svg ...>...</svg>",
      "usedBy": ["Button", "Checkbox"]
    }
  ],
  "assets": [
    {
      "name": "AppLogoSvg",
      "importPath": "@/assets/logo.svg",
      "sourcePath": "{sourceDir}/assets/logo.svg",
      "svgString": "...",
      "usedBy": ["Header"]
    }
  ],
  "iconsByComponent": {
    "Button": ["Check", "X"],
    "Header": ["AppLogoSvg"]
  },
  "summary": {
    "totalIcons": 21,
    "totalAssets": 1,
    "componentsWithIcons": 22
  }
}

Workflow

1. Ensure output directory exists

mkdir -p .temp/figma-from-code/

2. Run the icon extraction script

node {skillRoot}/scripts/extract-icons.js \
  --scan {sourceDir} \
  --output .temp/figma-from-code/icons.json

The script:

• Recursively finds all .tsx? files (excludes node_modules, test files)
• Parses static imports from lucide-react
• Resolves each icon's SVG from node_modules/lucide-react/dist/esm/icons/
• Finds and extracts SVG file imports (e.g., import Logo from '@/assets/logo.svg')
• Maps which components use which icons/assets

3. Read and summarize the output

Read .temp/figma-from-code/icons.json and extract:

• summary.totalIcons — number of Lucide icons found
• summary.totalAssets — number of SVG file assets found
• summary.componentsWithIcons — how many components use icons
• icons[].name — list of icon names
• assets[].name — list of asset names

4. Write icons summary for the orchestrator

Extract the data the orchestrator needs into a small summary file so it never has to read the full icons.json (which contains SVG strings):

node -e "
  const data = JSON.parse(require('fs').readFileSync('.temp/figma-from-code/icons.json','utf-8'));
  const summary = {
    iconCount: data.summary.totalIcons,
    icons: data.icons.map(i => i.name),
    assetCount: data.summary.totalAssets,
    assets: data.assets.map(a => a.name)
  };
  require('fs').writeFileSync('.temp/figma-from-code/icons-summary.json', JSON.stringify(summary, null, 2));
"

Write to .temp/figma-from-code/icons-summary.json. The orchestrator reads only this file (~500 bytes) instead of the full icons.json.

5. Report

Icon & Asset Discovery complete:
- {totalIcons} Lucide icons discovered
- {totalAssets} SVG assets found
- Icons used across {componentsWithIcons} components

Scripts Reference

Do NOT modify this script.

Skip / Resume

If called with resume: true, check whether .temp/figma-from-code/icons.json exists on disk. If it does, skip and read the existing file. If it's missing, re-run.

Error Handling