From 458ebf366648e5b6eb2035706769387870850006 Mon Sep 17 00:00:00 2001
From: RiN <ri7nz@evilfactory.id>
Date: Tue, 16 Nov 2021 18:21:37 +0800
Subject: [PATCH] fix(issue-7): missing validation for tag path (#8)

Solve issue https://github.com/kodingdotninja/create-chakra-icons/issues/7
---
 examples/Issue7.js  |  2 ++
 examples/issue7.svg |  7 +++++++
 lib/chakra.js       | 14 ++++++++++++--
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 examples/Issue7.js
 create mode 100644 examples/issue7.svg

diff --git a/examples/Issue7.js b/examples/Issue7.js
new file mode 100644
index 0000000..c16af3f
--- /dev/null
+++ b/examples/Issue7.js
@@ -0,0 +1,2 @@
+import { Icon } from "@chakra-ui/react";
+export const Unamed = props => <Icon viewBox="0 0 67 67" {...props}><g fill="none" stroke="#000"><path d="m18.951 33.437 9.95 9.951L48.36 23.929" /><circle cx={33.5} cy={33.5} r={33.5} stroke="none" /><circle cx={33.5} cy={33.5} r={33} /></g></Icon>;
\ No newline at end of file
diff --git a/examples/issue7.svg b/examples/issue7.svg
new file mode 100644
index 0000000..e88c7eb
--- /dev/null
+++ b/examples/issue7.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 67">
+  <g fill="none" stroke="#000">
+    <path d="m18.951 33.437 9.95 9.951L48.36 23.929"/>
+    <circle cx="33.5" cy="33.5" r="33.5" stroke="none"/>
+    <circle cx="33.5" cy="33.5" r="33"/>
+  </g>
+</svg>
diff --git a/lib/chakra.js b/lib/chakra.js
index 7f3bf56..fbc6159 100644
--- a/lib/chakra.js
+++ b/lib/chakra.js
@@ -26,8 +26,18 @@ const createChakraIcon = (...sources) => {
   const isTypescript = sources.some(({ isTypescript }) => isTypescript);
   const perFileCode = ({ source: svg, displayName }) => {
     const hast = SvgParser.parse(svg);
-
-    if (ast.hastChildrenLength(hast) > 1) {
+    // This for solve issue {https://github.com/kodingdotninja/create-chakra-icons/issues/7}
+    // In the issue 7, have some example svg file at examples/issue7.svg
+    // {isNotPathTagName} for know the tag is not <path />
+    // when not a <path />, so make as icon component  (not functional component)
+    const isNotTagnamePath = (() => {
+      if (hast.children[0].children) {
+        const [head] = hast.children[0].children;
+        return head.tagName && head.tagName !== "path";
+      }
+      return false;
+    })();
+    if (ast.hastChildrenLength(hast) > 1 || isNotTagnamePath) {
       return ast.hastToComponent(hast, { displayName, isTypescript });
     }