Function createIcon

packages/@react-spectrum/s2/src/Icon.tsx:99–152

(
  Component: ComponentType<SVGProps<SVGSVGElement>>,
  context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext
)

);

export function createIcon(
  Component: ComponentType<SVGProps<SVGSVGElement>>,
  context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext
): FunctionComponent<IconProps> {
  return (props: IconProps) => {
    let ref = useRef<SVGElement>(null);
    let ctx;
    // TODO: remove this default once we release RAC and use DEFAULT_SLOT.
    [ctx, ref] = useSpectrumContextProps(
      {slot: props.slot || 'icon'} as IconContextValue,
      ref,
      context
    );
    let {render, styles: ctxStyles} = ctx;
    let {
      UNSAFE_className,
      UNSAFE_style,
      slot,
      'aria-label': ariaLabel,
      'aria-hidden': ariaHidden,
      styles,
      ...otherProps
    } = props;

    if (!ariaHidden) {
      ariaHidden = undefined;
    }

    let svg = (
      <SkeletonWrapper>
        <Component
          {...otherProps}
          focusable={false}
          aria-label={ariaLabel}
          aria-hidden={ariaLabel ? ariaHidden || undefined : true}
          role="img"
          data-slot={slot}
          className={
            (UNSAFE_className ?? '') +
            ' ' +
            useSkeletonIcon(mergeStyles(iconStyles(null, styles), ctxStyles))
          }
          style={UNSAFE_style}
        />
      </SkeletonWrapper>
    );

    if (render) {
      return render(svg);
    }

    return svg;
  };
}

const illustrationStyles = style(
  {