From 8c34f2d19d6ee85ded39c837738392bd66bdfdbf Mon Sep 17 00:00:00 2001
From: Thijs-Jan <13321277+MoltenCoffee@users.noreply.github.com>
Date: Thu, 27 Jan 2022 20:56:05 +0100
Subject: [PATCH] Allow children in React and Preact icons (#485)

* Allow children in React and Preact icons

* Reverse children order

* Revert "Reverse children order"

This reverts commit bf7489dd29b9a175745d28b6ea707150c7043b5f.
---
 packages/lucide-preact/src/createPreactComponent.js | 6 +++---
 packages/lucide-react/src/createReactComponent.js   | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/lucide-preact/src/createPreactComponent.js b/packages/lucide-preact/src/createPreactComponent.js
index 8f383878a..208e517f7 100644
--- a/packages/lucide-preact/src/createPreactComponent.js
+++ b/packages/lucide-preact/src/createPreactComponent.js
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';
 
 /**
@@ -12,7 +12,7 @@ import defaultAttributes from './defaultAttributes';
 export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
 export default (iconName, iconNode) => {
-  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
+  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }) =>
     h(
       'svg',
       {
@@ -24,7 +24,7 @@ export default (iconName, iconNode) => {
         class: `lucide lucide-${toKebabCase(iconName)}`,
         ...rest,
       },
-      iconNode.map(([tag, attrs]) => h(tag, attrs)),
+      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
     );
 
   Component.displayName = `${iconName}`;
diff --git a/packages/lucide-react/src/createReactComponent.js b/packages/lucide-react/src/createReactComponent.js
index 9f4794e22..4104ff580 100644
--- a/packages/lucide-react/src/createReactComponent.js
+++ b/packages/lucide-react/src/createReactComponent.js
@@ -14,7 +14,7 @@ export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2
 
 export default (iconName, iconNode) => {
   const Component = forwardRef(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
       createElement(
         'svg',
         {
@@ -27,7 +27,7 @@ export default (iconName, iconNode) => {
           className: `lucide lucide-${toKebabCase(iconName)}`,
           ...rest,
         },
-        iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        [...iconNode.map(([tag, attrs]) => createElement(tag, attrs)), ...(children || [])],
       ),
   );