Allow using a react component as an icon for Widgets when writing UiItemsProvider

[aruniverse]

AbstractWidgetProps icon should probably allow for an HTML element as well. Right now you're stuck using the webfont icons or suing the Icon utilities to create an IconSpec from the svg?sprite or web components.

For Toolbar items we've been creating CustomItemDefs, which allow for a ReactNode as the iconSpec. Clearly we can't use React.ReactNode in appui-abstract but should allow for some type of HTML element, or provide a helper like we do for CustomItemDefs

This request is being driven by DR

Here is how we currently use iconSpecs for toolbar items: https://github.com/iTwin/viewer-components-react/blob/master/packages/itwin/geo-tools/src/GeoToolsItemDef.tsx#L24

[NancyMcCallB]

Right now, you can use the IconHelper.getIconData in core-react to "hide" React icons on a definition that can be used by AbstractWidgetProps. In 4.0 we're planning to make it easier.

[NancyMcCallB]

It looks like we moved all the icons in our test apps to using SVGs. I've made a change to appui-test-providers to specify the floating ViewAttributes widget icon using an icon from itwinui-react-icons. Until it's pushed, here's the important code:

  const internalData = new Map<string, any>();
  const widgetIconSpec = IconHelper.getIconData(<SvgWindowSettings />, internalData);
  widgets.push({
    id: "appui-test-providers:ViewAttributesWidget",
    label: "View Attributes",
    icon: widgetIconSpec,
    internalData,
    defaultState: WidgetState.Floating,
    floatingContainerId: "appui-test-providers:ViewAttributesWidget",
    isFloatingStateSupported: true,
    getWidgetContent: () => { // eslint-disable-line react/display-name
      return <ViewAttributesWidgetComponent />;
    },
    canPopout: true,
  });

[jason-crow]

thanks @NancyMcCallB

[GerardasB]

icon property of a widget is now of IconSpec type, allowing ReactNode to be provided as an icon.