fix data props (#3)

.svgrrc.js

@@ -4,11 +4,10 @@ module.exports = {
   template: require('./templates/svg.js'),
   typescript: true,
   outDir: path.join('src', 'icons'),
+  expandProps: 'end',
   memo: true,
   icon: true,
   svgProps: {
-    className: '{className}',
-    fill: 'currentColor',
-    style: '{style}'
+    fill: 'currentColor'
   }
 };

README.md

@@ -33,22 +33,21 @@ function Component() {
         fontSize: '20px',
         color: 'red'
       }}
-      // If you need to add extra props use
-      svgProps={{}}
       // For icons that use strokeWidth you can change it like this
       strokeWidth={32}
       // to add a class name to the svg
       className="your class"
+      // All the props are forwarded to the SVG component
     />
   );
 }
 ```
 
-### Properties
+### Props
 
-| Name        | Type          | Default  |
-| ----------- | ------------- | -------- |
-| svgProps    | SVGProps      | {}       |
-| style       | CSSProperties | {}       |
-| strokeWidth | number        | 32 or 16 |
-| className   | string        |          |
+| Name        | Type             | Default  |
+| ----------- | ---------------- | -------- |
+| style       | CSSProperties    | {}       |
+| strokeWidth | number \| string | 32 or 16 |
+| className   | string           |          |
+| ...         | Other SVG Props  |          |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raresail/react-ionicons",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": "[email protected]:RaresAil/react-ionicons.git",
   "author": "RaresAil <[email protected]>",
   "license": "MIT",

templates/svg.js

@@ -2,11 +2,13 @@ const propTypesTemplate = (
   { /* imports, */ interfaces, componentName, jsx, exports },
   { tpl }
 ) => {
-  return tpl`import { memo } from 'react';
-import type { IonIconProps } from '../types';
+  return tpl`import { SVGProps, memo } from 'react';
 ${interfaces}
 
-function ${componentName}({ className, strokeWidth, style, svgProps: props }: IonIconProps) {
+function ${componentName}({
+  strokeWidth,
+  ...props
+}: Omit<SVGProps<SVGSVGElement>, 'fill' | 'stroke'>) {
   return ${jsx};
 }