Add Icon widget component with lucide-react integration

[Copilot]

Implements an Icon widget component that dynamically maps icon names to lucide-react library icons.

Changes

• New icon.tsx component with props:

  • name: Icon name from lucide-react (supports PascalCase, kebab-case, snake_case)
  • color: CSS color value
  • size: Pixel size (default: 24)

• Automatic name normalization: Converts various naming formats to lucide-react's PascalCase convention

• Fallback rendering: Displays placeholder SVG for invalid icon names

• Component registration: Added to widget component registry and definitions for Monaco editor IntelliSense

Usage

<Icon name="Home" size={32} color="#3b82f6" />
<Icon name="search" size={24} />
<Icon name="user-circle" color="red" />

Screenshot

Component appears in the Display category with full documentation and live preview showing customizable color and size properties.

Original prompt

Create a widget component Icon, supported props are name, color and size. Mapping the name to the Icon in lucide-react library.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.