Add API support for icons

[wise-king-sullyman]

Problem Statement

PatternFly icons are available in @patternfly/react-icons and displayed on the website at https://www.patternfly.org/design-foundations/icons#all-icons, but there is no API endpoint to fetch icon metadata or SVGs programmatically.

Key Requirement: The API must support fine-grained filtering to minimize response size for MCP/LLM consumption, reducing context bloat when fetching icons.

Goal

Create API endpoints that expose PatternFly icons with a hierarchical structure consistent with existing API patterns, enabling MCPs and other consumers to fetch only the specific icons they need.

Proposed Solution

Add icon endpoints following the existing API hierarchy pattern:

• GET /api/icons → Returns list of all available icons with metadata
• GET /api/icons?filter=circle → Returns filtered list of icons with metadata
• GET /api/icons/[icon-name] → Returns actual SVG markup for the icon

Completion Criteria

• API Routes Created

  • Create /api/icons/index.ts route returning array of icon objects with metadata
  • Create /api/icons/[icon-name].ts route returning SVG markup as image/svg+xml
  • All routes import from @patternfly/react-icons/dist/esm/icons index
  • Support case-insensitive icon name lookups (kebab-case and PascalCase)

• Route: /api/icons (index)

  • Returns JSON array of icon objects sorted alphabetically by name
  • Each icon object: { name, reactName, style, usage, unicode }
  • Support ?filter= query parameter for case-insensitive substring match on icon name
  • Filter returns matching icons or empty array (not an error)

• Route: /api/icons/[icon-name]

  • Returns SVG markup constructed from IconConfig
  • SVG format: <svg width="{width}" height="{height}" viewBox="{xOffset} {yOffset} {width} {height}"><path d="{svgPath}"/></svg>
  • Return 404 if icon doesn't exist with suggestion to use filter
  • Content-Type: image/svg+xml

• Error Handling

  • Return 404 when icon doesn't exist with suggestion to use /api/icons?filter=...
  • Return empty array when filter yields no matches
  • Handle cases where icons module is not available

• Documentation

  • Update src/pages/api/index.ts endpoints array with icon endpoints
  • Document icon object structure and which fields may be unavailable
  • Document filter query parameter
  • Update README.mdx with icon API endpoints
  • Update OpenAPI spec in /api/openapi.json.ts if applicable
  • Note response size (~873 icons, recommend filtering for MCP usage)

• Testing

  • Add unit tests for icon routes
  • Test filter matching logic (case-insensitive, substring)
  • Test error cases (invalid icon name, missing module)

Out of Scope

• Serving React components (only SVG markup and metadata)
• Icon categorization if metadata not available in package (can be added later via manual mapping)
• Customizing icon colors or sizes via query parameters
• Curating to website's subset of 194 icons (expose all ~873 icons)