gilbarbara / react-inlinesvg

An SVG loader component for ReactJS

Home Page:https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG attributes in Props

Spaubleit opened this issue · comments

Thank you for this great library. I have suggestion how to improve it. Now we have interface like this:

export interface Props {
  baseURL?: string;
  cacheRequests?: boolean;
  children?: React.ReactNode;
  description?: string;
  loader?: React.ReactNode;
  innerRef?: React.Ref<HTMLElement>;
  onError?: (error: Error | FetchError) => void;
  onLoad?: (src: string, isCached: boolean) => void;
  preProcessor?: (code: string) => string;
  src: string;
  title?: string;
  uniqueHash?: string;
  uniquifyIDs?: boolean;
  [key: string]: any;
}

Before I checked type I did not realize there is possibility to pass className or styles to SVG element.
This line allow us pass any prop:

<InlineSVG src={somePath} foo={'bar'}/> // valid

It is possible to declare Props like this:

export interface Props extends Omit<HTMLAttributes<SVGElement>, 'onLoad' | 'onError'> {
  baseURL?: string;
  cacheRequests?: boolean;
  children?: React.ReactNode;
  description?: string;
  loader?: React.ReactNode;
  innerRef?: React.Ref<HTMLElement>;
  onError?: (error: Error | FetchError) => void;
  onLoad?: (src: string, isCached: boolean) => void;
  preProcessor?: (code: string) => string;
  src: string;
  title?: string;
  uniqueHash?: string;
  uniquifyIDs?: boolean;
}

Now meaningless props cause errors:

<InlineSVG src={somePath} foo={'bar'}/> // Propery 'foo' does not exist on type

It is possible to change Props type or there is are downsides I did not know about?

Sorry for bad English.

Hey

I have updated the Props interface but I had to use React.HTMLProps instead of HTMLAttributes.
It's available in 2.0.1