Add icon support: React component names and SVG URLs

Agent-Logs-Url: https://github.com/tinypluginlabs/demo/sessions/9e1fd017-a1c4-4a7b-a5e6-991025845f5e

Co-authored-by: ideag <3252474+ideag@users.noreply.github.com>

Author: Copilot

BLUEPRINT_JSON_STRUCTURE.md

@@ -12,6 +12,7 @@ This document provides the structure definition for `/blueprints/blueprints.json
       "id": "string",
       "title": "string",
       "path": "string",
+      "icon": "string",
       "disabled": false
     }
   ]
@@ -26,8 +27,27 @@ This document provides the structure definition for `/blueprints/blueprints.json
 | `buttons[].id` | String | Yes | Unique identifier for the button (used as React key) |
 | `buttons[].title` | String | Yes | Display text shown under the button icon |
 | `buttons[].path` | String | Yes | Navigation path (e.g., "/tinyrelated") |
+| `buttons[].icon` | String | No | Icon to display (React component name or SVG URL, default: "WordPressIcon") |
 | `buttons[].disabled` | Boolean | No | Whether the button is disabled (default: false) |
 
+## Icon Configuration
+
+The `icon` field supports two formats:
+
+### 1. React Component Name
+Specify the name of an icon component exported from `@wp-playground/components`:
+- `"WordPressIcon"` - WordPress logo (default)
+- `"ClockIcon"` - Clock icon
+- `"playgroundLogo"` - Playground logo
+- `"temporaryStorage"` - Temporary storage icon
+
+### 2. SVG URL
+Provide a direct URL to an SVG file:
+- `"https://example.com/custom-icon.svg"`
+- `"https://cdn.example.com/icons/my-icon.svg"`
+
+If the `icon` field is omitted or an invalid component name is provided, the button will default to using `WordPressIcon`.
+
 ## Example Configuration
 
 ```json
@@ -37,12 +57,14 @@ This document provides the structure definition for `/blueprints/blueprints.json
       "id": "tinyrelated",
       "title": "tinyRelated",
       "path": "/tinyrelated",
+      "icon": "WordPressIcon",
       "disabled": false
     },
     {
       "id": "tinyrating",
       "title": "tinyRating",
       "path": "/tinyrating",
+      "icon": "https://example.com/rating-icon.svg",
       "disabled": false
     },
     {
@@ -129,11 +151,19 @@ When a button is clicked:
 2. The path is resolved through the blueprint preset system
 3. The corresponding blueprint ZIP file is loaded (e.g., `/blueprints/tinyrelated.zip`)
 
+## Icon Resolution
+
+Icons are resolved in the following order:
+1. If `icon` is omitted, use `WordPressIcon` (default)
+2. If `icon` starts with `http://` or `https://`, load as external SVG image
+3. If `icon` matches a component name in `@wp-playground/components`, use that component
+4. If none of the above, fall back to `WordPressIcon`
+
 ## Limitations
 
-- All buttons currently use the WordPress icon (not configurable via JSON)
 - The `disabled` field only affects button interaction, not visibility
 - Button order in the JSON determines display order in the overlay
+- External SVG icons must be accessible from the client (CORS considerations apply)
 
 ## Related Documentation
 

IMPLEMENTATION_SUMMARY.md

@@ -15,6 +15,7 @@ export interface BlueprintButton {
   id: string;              // Unique identifier
   title: string;           // Display title
   path: string;            // Navigation path
+  icon?: string;           // Optional: React component name or SVG URL
   disabled?: boolean;      // Optional: button disabled state
 }
 
@@ -30,23 +31,45 @@ Updated the `SavedPlaygroundsOverlay` component to:
 - Use the `useFetch` hook to load `/blueprints/blueprints.json`
 - Fall back to hardcoded defaults if the JSON file cannot be fetched
 - Transform the JSON data into button configurations with onClick handlers
+- Resolve icons dynamically from React component names or SVG URLs
 
 Key changes:
 ```typescript
+// Helper function to resolve icon from string (component name or URL)
+function resolveIcon(iconSpec?: string): React.ReactNode {
+  if (!iconSpec) {
+    return <WordPressIcon />;
+  }
+  
+  // Check if it's a URL (SVG from external source)
+  if (iconSpec.startsWith('http://') || iconSpec.startsWith('https://')) {
+    return <img src={iconSpec} alt="" style={{ width: '100%', height: '100%' }} />;
+  }
+  
+  // Try to resolve as a React component from @wp-playground/components
+  const IconComponent = (PlaygroundIcons as any)[iconSpec];
+  if (IconComponent && typeof IconComponent === 'function') {
+    return <IconComponent />;
+  }
+  
+  // Fallback to WordPressIcon if component not found
+  return <WordPressIcon />;
+}
+
 // Fetch from JSON
 const { data: blueprintsConfig } = useFetch<BlueprintsConfig>(
   '/blueprints/blueprints.json'
 );
 
 // Fallback to defaults
-const defaultCreationOptions = [...];
+const defaultCreationOptions: BlueprintButton[] = [...];
 const buttonsConfig = blueprintsConfig?.buttons || defaultCreationOptions;
 
-// Transform to button props
+// Transform to button props with dynamic icon resolution
 const creationOptions = buttonsConfig.map((button) => ({
   id: button.id,
   title: button.title,
-  iconComponent: <WordPressIcon />,
+  iconComponent: resolveIcon(button.icon),
   onClick: () => { window.location.href = button.path; },
   disabled: button.disabled ?? false,
 }));
@@ -96,7 +119,12 @@ The CI process should deploy a `blueprints.json` file to `/blueprints/blueprints
 ### Normal Operation
 1. When the overlay loads, it fetches `/blueprints/blueprints.json`
 2. If successful, buttons are created from the JSON data
-3. Each button navigates to the specified `path` when clicked
+3. Icons are resolved dynamically:
+   - If `icon` is omitted, uses `WordPressIcon` (default)
+   - If `icon` starts with `http://` or `https://`, loads as external SVG image
+   - If `icon` matches a component name in `@wp-playground/components`, uses that component
+   - If none of the above, falls back to `WordPressIcon`
+4. Each button navigates to the specified `path` when clicked
 
 ### Fallback Mechanism
 If the JSON file cannot be fetched (404, network error, etc.):
@@ -108,6 +136,11 @@ If the JSON file cannot be fetched (404, network error, etc.):
 - Buttons appear immediately using defaults or fetched data
 - This provides a seamless user experience
 
+### Icon Support
+Buttons can display custom icons in two ways:
+1. **React Component Names**: Use exported icon components from `@wp-playground/components` (e.g., "WordPressIcon", "ClockIcon", "playgroundLogo")
+2. **SVG URLs**: Provide a direct URL to an SVG file (e.g., "https://example.com/icon.svg")
+
 ## Testing
 
 ### Type Checking
@@ -138,12 +171,28 @@ npm run dev
 
 4. **Validation**: Consider adding JSON schema validation in your CI process to ensure the file structure is correct before deployment
 
+5. **Icon Support**: Icons can be specified as React component names (from `@wp-playground/components`) or as URLs to SVG files. External SVG icons must be accessible from the client (CORS considerations apply).
+
 ## Icon Customization
 
-Currently, all buttons use the `WordPressIcon` component. If you need to support different icons in the future, you would need to:
-1. Add an `icon` field to the `BlueprintButton` interface
-2. Create a mapping of icon names to icon components
-3. Update the button rendering logic to use the specified icon
+Icons are now fully customizable via the `icon` field in the JSON configuration:
+
+### Available React Component Icons
+From `@wp-playground/components`:
+- `WordPressIcon` - WordPress logo (default)
+- `ClockIcon` - Clock icon
+- `playgroundLogo` - Playground logo
+- `temporaryStorage` - Temporary storage icon
+
+### Using External SVG Icons
+Provide a direct URL to an SVG file:
+```json
+{
+  "icon": "https://example.com/custom-icon.svg"
+}
+```
+
+Note: External SVG icons must be accessible from the client browser. Ensure proper CORS headers are set if the SVG is hosted on a different domain.
 
 ## Security Considerations
 

packages/playground/website/src/components/saved-playgrounds-overlay/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import css from './style.module.css';
 import classNames from 'classnames';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
@@ -24,6 +25,7 @@ import {
 	setSiteSlugToRename,
 } from '../../lib/state/redux/slice-ui';
 import { WordPressIcon } from '@wp-playground/components';
+import * as PlaygroundIcons from '@wp-playground/components';
 import { PlaygroundRoute, redirectTo } from '../../lib/state/url/router';
 import {
 	Overlay,
@@ -32,7 +34,7 @@ import {
 	OverlaySection,
 } from '../overlay';
 import { useFetch } from '../../lib/hooks/use-fetch';
-import type { BlueprintsConfig } from '../../lib/types/blueprints-config';
+import type { BlueprintsConfig, BlueprintButton } from '../../lib/types/blueprints-config';
 
 interface SavedPlaygroundsOverlayProps {
 	onClose: () => void;
@@ -91,13 +93,40 @@ export function SavedPlaygroundsOverlay({
 		onClose();
 	}
 
+	// Helper function to resolve icon from string (component name or URL)
+	function resolveIcon(iconSpec?: string): React.ReactNode {
+		if (!iconSpec) {
+			return <WordPressIcon />;
+		}
+
+		// Check if it's a URL (SVG from external source)
+		if (iconSpec.startsWith('http://') || iconSpec.startsWith('https://')) {
+			return (
+				<img
+					src={iconSpec}
+					alt=""
+					style={{ width: '100%', height: '100%' }}
+				/>
+			);
+		}
+
+		// Try to resolve as a React component from @wp-playground/components
+		const IconComponent = (PlaygroundIcons as any)[iconSpec];
+		if (IconComponent && typeof IconComponent === 'function') {
+			return <IconComponent />;
+		}
+
+		// Fallback to WordPressIcon if component not found
+		return <WordPressIcon />;
+	}
+
 	// Fetch blueprints configuration from /blueprints/blueprints.json
 	const { data: blueprintsConfig } = useFetch<BlueprintsConfig>(
 		'/blueprints/blueprints.json'
 	);
 
 	// Fallback to hardcoded buttons if JSON fetch fails or is loading
-	const defaultCreationOptions = [
+	const defaultCreationOptions: BlueprintButton[] = [
 		{
 			id: 'tinyrelated',
 			title: 'tinyRelated',
@@ -125,7 +154,7 @@ export function SavedPlaygroundsOverlay({
 	const creationOptions = buttonsConfig.map((button) => ({
 		id: button.id,
 		title: button.title,
-		iconComponent: <WordPressIcon />,
+		iconComponent: resolveIcon(button.icon),
 		onClick: () => {
 			window.location.href = button.path;
 		},

packages/playground/website/src/lib/types/blueprints-config.ts

@@ -12,12 +12,14 @@
  *       "id": "tinyrelated",
  *       "title": "tinyRelated",
  *       "path": "/tinyrelated",
+ *       "icon": "WordPressIcon",
  *       "disabled": false
  *     },
  *     {
  *       "id": "tinyrating",
  *       "title": "tinyRating",
  *       "path": "/tinyrating",
+ *       "icon": "https://example.com/icon.svg",
  *       "disabled": false
  *     }
  *   ]
@@ -43,6 +45,15 @@ export interface BlueprintButton {
 	 */
 	path: string;
 
+	/**
+	 * Icon to display on the button
+	 * Can be:
+	 * - A React component name from @wp-playground/components (e.g., "WordPressIcon", "ClockIcon")
+	 * - A URL to an SVG file (e.g., "https://example.com/icon.svg")
+	 * - If omitted, defaults to "WordPressIcon"
+	 */
+	icon?: string;
+
 	/**
 	 * Whether the button should be disabled
 	 * @default false