Nothing happens trying to extends Props type from react-svg

[José Medina]

I'm trying this:

import { ReactSVG, Props as SVGProps } from 'react-svg';

type IconProps = Omit<SVGProps, 'src'>;

interface Props extends IconProps {
  iconName: string;
}

function Icon({ iconName, ...props }: Props) {
  return (
    <ReactSVG
      {...props}
      src={
        new URL(`../../assets/icons/${iconName}.svg`, import.meta.url).pathname
      }
    />
  );
}

export default Icon;

but only get and error when not define the iconName prop. Props not required are valid too

EDIT: I'm using Vite

[Tane Morgan]

Hi @jrafaaael, is this an issue with the types, or functionality of the module itself?

[Tane Morgan]

Closing due to inactivity (apologies for the delay on my side too).

[José Medina]

@tanem sorry, I don't see the reply. The error is:

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactSVG', gave the following error.
    Type '{ className: string; beforeInjection: (svg: SVGSVGElement) => void; src: string; afterInjection?: Errback | undefined; evalScripts?: EvalScripts | undefined; ... 512 more ...; zoomAndPan?: string | undefined; }' is not assignable to type 'IntrinsicClassAttributes<ReactSVG>'.
      Types of property 'ref' are incompatible.
        Type '((string | ((instance: HTMLWrapperType | null) => void) | RefObject<HTMLWrapperType>) & (string | ((instance: SVGSVGElement | null) => void) | RefObject<...>)) | null | undefined' is not assignable to type 'LegacyRef<ReactSVG> | undefined'.
          Type '((instance: HTMLWrapperType | null) => void) & ((instance: SVGSVGElement | null) => void)' is not assignable to type 'LegacyRef<ReactSVG> | undefined'.
            Type '((instance: HTMLWrapperType | null) => void) & ((instance: SVGSVGElement | null) => void)' is not assignable to type '(instance: ReactSVG | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'ReactSVG | null' is not assignable to type 'HTMLWrapperType | null'.
                  Type 'ReactSVG' is not assignable to type 'HTMLWrapperType | null'.
                    Type 'ReactSVG' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 276 more.
  Overload 2 of 2, '(props: Props, context: any): ReactSVG', gave the following error.
    Type '{ className: string; beforeInjection: (svg: SVGSVGElement) => void; src: string; afterInjection?: Errback | undefined; evalScripts?: EvalScripts | undefined; ... 512 more ...; zoomAndPan?: string | undefined; }' is not assignable to type 'IntrinsicClassAttributes<ReactSVG>'.
      Types of property 'ref' are incompatible.
        Type '((string | ((instance: HTMLWrapperType | null) => void) | RefObject<HTMLWrapperType>) & (string | ((instance: SVGSVGElement | null) => void) | RefObject<...>)) | null | undefined' is not assignable to type 'LegacyRef<ReactSVG> | undefined'.

and the component is:

import { ReactSVG, Props } from 'react-svg';

interface IconProps extends Props {
  icon: string;
}

function Icon({ icon, ...props }: IconProps) {
  return (
    <ReactSVG
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...props}
      className="icon-wrapper"
      beforeInjection={(svg) => {
        svg.classList.add('icon');
      }}
      src={new URL(`../../assets/icons/${icon}.svg`, import.meta.url).pathname}
    />
  );
}

export default Icon;

[Tane Morgan]

Hey @jrafaaael, had a quick look, a bit stumped as to what I can do to fix the precise issue at the moment. Maybe similar to these issues:

downshift-js/downshift#718
ant-design/ant-design#10405

Guess in the meantime you could ignore it somehow but not sure if this fits your use case:

interface IconProps extends Omit<Props, 'ref'> {
  icon: string;
}

If I end up finding a decent fix I'll reply on this issue.