SVG attributes in Props
Spaubleit opened this issue · comments
Spaubleit commented
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.
Gil Barbara commented
Hey
I have updated the Props interface but I had to use React.HTMLProps instead of HTMLAttributes.
It's available in 2.0.1