feat(icons): allow plugins to provide custom icon components (spinnak…

…er#10001)

* feat(icons): allow plugins to provide custom icon components

Enables plugins to use the Icon component with a custom icon.

Currently the Icon component is limited to only icons defined in iconsByName.

* feat(icons): fix logic

* feat(icons): different errors for different props

packages/presentation/src/icons/Icon.tsx

@@ -1,11 +1,13 @@
+import type { SVGComponent } from '*.svg';
 import React, { memo } from 'react';
 
 import { iconsByName } from './iconsByName';
 
 export type IconNames = keyof typeof iconsByName;
 
 export type IIconProps = {
-  name: IconNames;
+  name?: IconNames;
+  reactComponent?: SVGComponent;
   appearance?: 'light' | 'neutral' | 'dark';
   size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | string;
   color?: string;
@@ -27,11 +29,19 @@ const throwInvalidIconError = (name: string) => {
   throw new Error(`No icon with the name ${name} exists`);
 };
 
-export const Icon = memo(({ name, appearance, size, color, className }: IIconProps) => {
-  const Component = iconsByName[name];
+const throwInvalidIconComponentError = () => {
+  throw new Error('No name or reactComponent provided in Icon props');
+};
 
-  if (!Component) {
-    throwInvalidIconError(name);
+export const Icon = memo(({ name, reactComponent, appearance, size, color, className }: IIconProps) => {
+  let Component;
+  if (name) {
+    Component = iconsByName[name];
+    if (!Component) {
+      throwInvalidIconError(name);
+    }
+  } else {
+    Component = reactComponent || throwInvalidIconComponentError();
   }
 
   const width = size ? pxDimensionsBySize[size] || size : pxDimensionsBySize[DEFAULT_SIZE];

packages/presentation/src/types/svg.d.ts

@@ -1,6 +1,7 @@
 declare module '*.svg' {
   import type { ComponentType, SVGProps } from 'react';
-  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  export type SVGComponent = ComponentType<SVGProps<HTMLOrSVGElement>>;
+  export const ReactComponent: SVGComponent;
   const URL: string;
   export default URL;
 }