Merge branch 'master' of github.com:yocdev/tarocodegen

Author: xiazhigang

example/icons/IconAlertTriangle.rn.tsx

@@ -7,6 +7,7 @@ function IconAlertTriangle(props) {
       xmlns="http://www.w3.org/2000/svg"
       width={24}
       height={24}
+      viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
       strokeWidth={2}

example/icons/IconAlertTriangle.tsx

@@ -6,6 +6,7 @@ function IconAlertTriangle(props) {
       xmlns="http://www.w3.org/2000/svg"
       width={24}
       height={24}
+      viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
       strokeWidth={2}

example/icons/IconChevronRight.rn.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+function IconChevronRight(props) {
+  return (
+    <Svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="prefix__feather prefix__feather-chevron-right"
+      {...props}
+    >
+      <Path d="M9 18l6-6-6-6" />
+    </Svg>
+  );
+}
+
+export default IconChevronRight;

example/icons/IconChevronRight.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+function IconChevronRight(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="prefix__feather prefix__feather-chevron-right"
+      {...props}
+    >
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  );
+}
+
+export default IconChevronRight;

example/icons/source/chevron-right.svg

@@ -1,2 +1,2 @@
-declare module 'prettier'
-declare module '@svgr/core'
+declare module "prettier";
+declare module "@svgr/core";

global.d.ts

@@ -1,6 +1,6 @@
 {
 	"name": "@yocdev/tarocodegen",
-	"version": "1.1.4",
+	"version": "1.1.6",
 	"author": "[email protected]",
 	"license": "MIT",
 	"bin": {

package.json

@@ -139,9 +139,11 @@ const svgrGenerator = async (fileDir: string, componentName: string) => {
 			svgCode,
 			{
 				native: platform === "rn",
+				dimensions: false,
 				replaceAttrValues: {
 					"#000": "{props.color}",
 					"#000000": "{props.color}",
+					currentColor: "{props.color}",
 				},
 				plugins: [
 					"@svgr/plugin-svgo",

src/icons/index.ts

@@ -0,0 +1,47 @@
+import * as path from "path";
+import * as fs from "fs";
+// @ts-ignore
+import svgr from "@svgr/core";
+
+function loadSvg() {
+	const svgCode = fs.readFileSync(
+		path.resolve(__dirname, "../../example/icons/source/alert-triangle.svg"),
+		"utf-8"
+	);
+	console.log(svgCode);
+	svgr(
+		svgCode,
+		{
+			native: true,
+			dimensions: false,
+			replaceAttrValues: {
+				"#000": "{props.color}",
+				"#000000": "{props.color}",
+				currentColor: "{props.color}",
+			},
+			plugins: [
+				"@svgr/plugin-svgo",
+				"@svgr/plugin-jsx",
+				"@svgr/plugin-prettier",
+			],
+		},
+		{ componentName: "MyComponent" }
+	).then((jsCode: string) => {
+		console.log("--js", jsCode);
+	});
+}
+
+loadSvg();
+
+// function template(
+// 	{ template }: any,
+// 	opts: any,
+// 	{ imports, componentName, props, jsx, exports }: any
+// ) {
+// 	console.log(jsx, opts);
+// 	return template.ast`
+// 	  ${imports}
+// 	  const ${componentName} = (${props}) => ${jsx}
+// 	  ${exports}
+// 	`;
+// }

src/util/transformSvg.ts

@@ -5,5 +5,5 @@
 		"esModuleInterop": true,
 		"outDir": "dist"
 	},
-	"include": ["src", "./global.d.ts"]
+	"include": ["src", "global.d.ts"]
 }