fix: example urls with icons (adobe#9368)

* fix: example urls with icons

* remove console logs

* use a lazy icon

* fix lint

Author: snowystinger

packages/dev/s2-docs/src/IconPicker.tsx

@@ -11,6 +11,7 @@ import {useGlobalListeners} from '@react-aria/utils';
 
 const iconList = Object.keys(icons).map(name => ({id: name.replace(/^S2_Icon_(.*?)(Size\d+)?_2.*/, '$1'), icon: icons[name].default}));
 const iconMap = Object.fromEntries(iconList.map(item => [item.id, item.icon]));
+export const Icon = ({icon}) => createElement(iconMap[icon]);
 
 const itemStyle = style({
   ...focusRing(),
@@ -33,7 +34,7 @@ const itemStyle = style({
   justifyContent: 'center'
 });
 
-type IconValue = string | {text?: string, icon?: string | null, iconJSX?: ReactNode} | null;
+type IconValue = string | {text?: string, icon?: string | null} | null;
 interface IconPickerProps {
   value: IconValue,
   onChange: (value: IconValue) => void,
@@ -64,12 +65,12 @@ export function IconPicker({value, onChange, label, contextualHelp}: IconPickerP
   return (
     <Select
       aria-label="Icon"
-      selectedKey={valueObject?.icon ?? null}
-      onSelectionChange={icon => {
+      value={valueObject?.icon ?? null}
+      onChange={icon => {
         if (!icon || icon === valueObject?.icon) {
-          onChange({...valueObject, icon: null, iconJSX: null});
+          onChange({...valueObject, icon: null});
         } else if (icon) {
-          onChange({...valueObject, icon: icon as string, iconJSX: createElement(iconMap[icon])});
+          onChange({...valueObject, icon: icon as string});
         }
       }}
       className={style({display: 'flex', flexDirection: 'column', gap: 2, width: 'fit'})}>

packages/dev/s2-docs/src/VisualExampleClient.tsx

@@ -18,6 +18,7 @@ import {TabLink} from './FileTabs';
 import {useLocale} from 'react-aria';
 
 export const IconPicker = lazy(() => import('./IconPicker').then(({IconPicker}) => ({default: IconPicker})));
+let LazyIcon = lazy(() => import('./IconPicker').then(({Icon}) => ({default: Icon})));
 
 type Props = {[name: string]: any};
 type Controls = {[name: string]: PropControl};
@@ -132,10 +133,17 @@ export function Output({align = 'center', acceptOrientation}: {align?: 'center'
 
   if (!isValidElement(component)) {
     let children = props.children;
-    if (children?.iconJSX || children?.avatar || children?.badge) {
+    if (children?.icon || children?.avatar || children?.badge) {
+      let iconElement: ReactNode | null = null;
+      if (children.avatar) {
+        iconElement = <Avatar src="https://i.imgur.com/xIe7Wlb.png" />;
+      } else if (children.icon) {
+        iconElement = (<LazyIcon icon={children.icon} />);
+      }
+
       children = (
         <>
-          {children.avatar ? <Avatar src="https://i.imgur.com/xIe7Wlb.png" /> : children.iconJSX}
+          {iconElement}
           {children.text && <Text>{children.text}</Text>}
           {children.badge && <NotificationBadge value={12} />}
         </>