feat: Add view props to svg component

Author: fwh1990

package.json

@@ -38,6 +38,7 @@
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^12.7.2",
     "@types/react": "^16.9.2",
+    "@types/react-native": "^0.60.8",
     "@types/xml2js": "^0.4.4",
     "react": "^16.9.0",
     "react-native": "^0.60.5",

src/libs/generateComponent.ts

@@ -40,6 +40,10 @@ export const generateComponent = (data: XmlData, config: Config) => {
     svgComponents.add('Svg');
   }
 
+  if (config.use_typescript) {
+    svgComponents.add('GProps');
+  }
+
   mkdirp.sync(saveDir);
   glob.sync(path.join(saveDir, '*')).forEach((file) => fs.unlinkSync(file));
 
@@ -54,6 +58,10 @@ export const generateComponent = (data: XmlData, config: Config) => {
 
     names.push(iconIdAfterTrim);
 
+    if (config.use_typescript) {
+      currentSvgComponents.add('GProps');
+    }
+
     for (const domName of Object.keys(item)) {
       switch (domName) {
         case 'path':
@@ -77,7 +85,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
     }
 
     imports.push(componentName);
-    cases += `${whitespace(6)}return <${componentName} size={size} color={color} />;\n`;
+    cases += `${whitespace(6)}return <${componentName} size={size} color={color} {...rest} />;\n`;
 
     singleFile = getTemplate('SingleIcon' + extension);
     singleFile = replaceSize(singleFile, config.default_icon_size);
@@ -128,7 +136,7 @@ export const generateComponent = (data: XmlData, config: Config) => {
 };
 
 const generateCase = (data: XmlData['svg']['symbol'][number], baseIdent: number) => {
-  let template = `\n${whitespace(baseIdent)}<Svg viewBox="${data.$.viewBox}" width={size} height={size}>\n`;
+  let template = `\n${whitespace(baseIdent)}<Svg viewBox="${data.$.viewBox}" width={size} height={size} {...rest}>\n`;
 
   for (const domName of Object.keys(data)) {
     let realDomName = SVG_MAP[domName];

src/templates/Icon.d.ts.template

@@ -1,9 +1,12 @@
 import { FunctionComponent } from 'react';
+// Don't forget to install package: @types/react-native
+import { ViewProps } from 'react-native';
+import { GProps } from 'react-native-svg';
 
-interface Props {
+interface Props extends GProps, ViewProps {
+  name: '#names#';
   size?: number;
   color?: string | string[];
-  name: '#names#';
 }
 
 declare const Icon: FunctionComponent<Props>;

src/templates/Icon.jsx.template

@@ -6,7 +6,7 @@ import React from 'react';
 #imports#
 
 #comments#
-const Icon = ({ color, name, size }) => {
+const Icon = ({ color, name, size, ...rest }) => {
   switch (name) {
 #cases#
   }

src/templates/Icon.tsx.template

@@ -2,19 +2,20 @@
 /* eslint-disable */
 
 import React, { FunctionComponent } from 'react';
+import {ViewProps} from 'react-native';
 #svgComponents#
 #imports#
 
 export type IconNames = '#names#';
 
-interface Props {
+interface Props extends GProps, ViewProps {
+  name: IconNames;
   size?: number;
   color?: string | string[];
-  name: IconNames;
 }
 
 #comments#
-const Icon: FunctionComponent<Props> = ({ color, name, size }) => {
+const Icon: FunctionComponent<Props> = ({ color, name, size, ...rest }) => {
   switch (name) {
 #cases#
   }

src/templates/SingleIcon.d.ts.template

@@ -1,6 +1,9 @@
 import { FunctionComponent } from 'react';
+// Don't forget to install package: @types/react-native
+import { ViewProps } from 'react-native';
+import { GProps } from 'react-native-svg';
 
-interface Props {
+interface Props extends GProps, ViewProps {
   size?: number;
   color?: string | string[];
 }

src/templates/SingleIcon.jsx.template

@@ -5,7 +5,7 @@ import React from 'react';
 #svgComponents#
 
 #comments#
-const #componentName# = ({ size, color }) => {
+const #componentName# = ({ size, color, ...rest }) => {
   return (#iconContent#  );
 };
 

src/templates/SingleIcon.tsx.template

@@ -2,15 +2,16 @@
 /* eslint-disable */
 
 import React, { FunctionComponent } from 'react';
+import { ViewProps } from 'react-native';
 #svgComponents#
 
-interface Props {
+interface Props extends GProps, ViewProps {
   size?: number;
   color?: string | string[];
 }
 
 #comments#
-const #componentName#: FunctionComponent<Props> = ({ size, color }) => {
+const #componentName#: FunctionComponent<Props> = ({ size, color, ...rest }) => {
   return (#iconContent#  );
 };
 

yarn.lock

@@ -871,7 +871,15 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
   integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
 
-"@types/react@^16.9.2":
+"@types/react-native@^0.60.8":
+  version "0.60.8"
+  resolved "https://registry.npmjs.org/@types/react-native/-/react-native-0.60.8.tgz#71f340b4b97ed0b1161f942354e0eebc9fbe5b00"
+  integrity sha512-bk13deCDm/DiNFdrF8Y5je++G9NPaCT/VxkSBY1Rcxu3rWZQIQal9uIH0Qc0Vi9sRX9us32EPevYylbscH3wEg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.9.2":
   version "16.9.2"
   resolved "https://registry.npmjs.org/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
   integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==