Interface for stitches SvgIcon

SvgIcon.tsx

import React from 'react';

import { styled, SvgIconConfig } from 'stitches.config';

export const SvgIconConfig = {
  variants: {
    size: {
      sm: {
        width: '$sm',
        height: '$sm',
      },
      md: {
        width: '$md',
        height: '$md',
      },
      lg: {
        width: '$lg',
        height: '$lg',
      },
      xl: {
        width: '$xl',
        height: '$xl',
      },
    },
  },
  defaultVariants: {
    size: 'lg',
  },
};

type BaseSvgIconProps = {
  viewBox?: string;
  color?: string;
};

export const SvgIcon = styled(
  ({
    children,
    color,
    viewBox,
    ...props
  }: BaseSvgIconProps & {
    children: (color: string) => React.ReactNode;
  }) => {
    const R = React.forwardRef<SVGSVGElement, {}>((noProps, forwardedRef) => (
      <svg viewBox={viewBox || '0 0 24 24'} {...props} ref={forwardedRef}>
        {children(color ?? 'currentColor')}
      </svg>
    ));
    return <R />;
  },
  SvgIconConfig
);

export type SvgIconProps = Omit<
  React.ComponentProps<typeof SvgIcon>,
  'children'
>;

export const DeleteIcon = (props: SvgIconProps) => (
  <SvgIcon {...props}>
    {(color: string) => (
      <path
        d="M7.52508 19.2283C7.54501 19.6599 7.93176 20 8.40224 20H16.5978C17.0682 20 17.457 19.6599 17.4749 19.2283L18.061 7.89485H6.93897L7.52508 19.2283ZM14.353 10.7109C14.353 10.5298 14.5125 10.3835 14.7099 10.3835H15.28C15.4774 10.3835 15.6369 10.5317 15.6369 10.7109V17.1858C15.6369 17.3669 15.4754 17.5131 15.28 17.5131H14.7099C14.5125 17.5131 14.353 17.3669 14.353 17.1858V10.7109ZM11.8591 10.7109C11.8591 10.5298 12.0186 10.3835 12.2159 10.3835H12.7861C12.9834 10.3835 13.1429 10.5317 13.1429 10.7109V17.1858C13.1429 17.3669 12.9834 17.5131 12.7861 17.5131H12.2159C12.0186 17.5131 11.8591 17.3669 11.8591 17.1858V10.7109ZM9.36314 10.7109C9.36314 10.5298 9.52262 10.3835 9.71799 10.3835H10.2881C10.4855 10.3835 10.645 10.5317 10.645 10.7109V17.1858C10.645 17.3669 10.4835 17.5131 10.2881 17.5131H9.71799C9.52063 17.5131 9.36314 17.3669 9.36314 17.1858V10.7109ZM18.4498 4.82469H14.67V4.16823C14.67 4.07497 14.5883 4 14.4866 4H10.5154C10.4137 4 10.332 4.07497 10.332 4.16823V4.82469H6.55022C6.2472 4.82469 6 5.0496 6 5.32937V6.91657H19V5.32937C19 5.05143 18.7548 4.82469 18.4498 4.82469Z"
        fill={color}
      />
    )}
  </SvgIcon>
);

const Test = () => {
  return (
    <div>
      <DeleteIcon size="lg" />
    </div>
  );
};