Add SVG element props to TS definitions (#50)

levrik · Nov 30, 2019 · a81857d · a81857d
1 parent eabf490
commit a81857d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/scripts/generate-preact.js b/scripts/generate-preact.js
@@ -19,6 +19,8 @@ declare const ${component.name}: MdiReactIconComponentType;
 export default ${component.name};
 `, () => `import { FunctionalComponent } from 'preact';
 
+// TODO(pcorpet): Extends SVGProps when it exists in Preact.
+
 export interface MdiReactIconProps {
   color?: string;
   size?: number | string;

diff --git a/scripts/generate-react.js b/scripts/generate-react.js
@@ -17,12 +17,15 @@ export default React.memo ? React.memo(${component.name}) : ${component.name};
 
 declare const ${component.name}: MdiReactIconComponentType;
 export default ${component.name};
-`, () => `import { ComponentType } from 'react';
+`, () => `import { ComponentType, SVGProps } from 'react';
 
-export interface MdiReactIconProps {
+type AllSVGProps = SVGProps<SVGSVGElement>
+
+type ReservedProps = 'color' | 'size' | 'width' | 'height' | 'fill' | 'viewBox'
+
+export interface MdiReactIconProps extends Pick<AllSVGProps, Exclude<keyof AllSVGProps, ReservedProps>> {
   color?: string;
   size?: number | string;
-  className?: string;
   // should not have any children
   children?: never;
 }

diff --git a/typings-test-preact.tsx b/typings-test-preact.tsx
@@ -28,5 +28,8 @@ const render = () => (
     <AccessPointNetworkIcon></AccessPointNetworkIcon>
     <AccessPointNetworkIcon size={16} />
     <AccessPointNetworkIcon color="#fff" size="16" class="some-class" className="some-class" />
+    <AccessPointNetworkIcon
+      size={16} style={{display: 'block', margin: 'auto'}}
+      onClick={() => {}} />
   </>
 );
diff --git a/typings-test-react.tsx b/typings-test-react.tsx
@@ -26,5 +26,8 @@ const render = () => (
     <AccessPointNetworkIcon></AccessPointNetworkIcon>
     <AccessPointNetworkIcon size={16} />
     <AccessPointNetworkIcon color="#fff" size="16" className="some-class" />
+    <AccessPointNetworkIcon
+      size={16} style={{display: 'block', margin: 'auto'}}
+      onClick={() => {}} />
   </>
 );