Add/rename braces/brackets/parenthesis icons and improve braces/json metadata (#1063)

* Add `square-brackets` icon

* Add `parentheses` icon

* Improve `curly-braces`/`json` metadata

* Refine `parentheses` icon

Match `path`s in #1134.

* Rename `square-brackets` to `brackets`

* Rename `curly-braces` to `braces`

* Update icons/parentheses.json

---------

Co-authored-by: Karsa <contact@karsa.org>

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+# These are supported funding model platforms
+open_collective: lucide-icons

icons/biohazard.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "fallout",
+    "waste",
+    "biology",
+    "chemistry",
+    "chemical",
+    "element"
+  ],
+  "categories": [
+    "science"
+  ]
+}

icons/biohazard.svg

@@ -0,0 +1,22 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="11.9" r="2" />
+  <path d="M6.7 3.4c-.9 2.5 0 5.2 2.2 6.7C6.5 9 3.7 9.6 2 11.6" />
+  <path d="m8.9 10.1 1.4.8" />
+  <path d="M17.3 3.4c.9 2.5 0 5.2-2.2 6.7 2.4-1.2 5.2-.6 6.9 1.5" />
+  <path d="m15.1 10.1-1.4.8" />
+  <path d="M16.7 20.8c-2.6-.4-4.6-2.6-4.7-5.3-.2 2.6-2.1 4.8-4.7 5.2" />
+  <path d="M12 13.9v1.6" />
+  <path d="M13.5 5.4c-1-.2-2-.2-3 0" />
+  <path d="M17 16.4c.7-.7 1.2-1.6 1.5-2.5" />
+  <path d="M5.5 13.9c.3.9.8 1.8 1.5 2.5" />
+</svg>

icons/braces.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "json",
+    "code",
+    "token",
+    "curly brackets",
+    "data"
+  ],
+  "categories": [
+    "development",
+    "files"
+  ],
+  "aliases": [
+    "curly-braces"
+  ]
+}

icons/brackets.json

@@ -1,12 +1,14 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "json",
     "code",
-    "token"
+    "token",
+    "array",
+    "list",
+    "square"
   ],
   "categories": [
     "development",
     "files"
   ]
-}
+}

icons/brackets.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 3h3v18h-3" />
+  <path d="M8 21H5V3h3" />
+</svg>

icons/file-json-2.json

@@ -3,7 +3,8 @@
   "tags": [
     "code",
     "json",
-    "curly braces"
+    "curly braces",
+    "curly brackets"
   ],
   "categories": [
     "files",

icons/file-json.json

@@ -3,7 +3,8 @@
   "tags": [
     "code",
     "json",
-    "curly braces"
+    "curly braces",
+    "curly brackets"
   ],
   "categories": [
     "files",

icons/fold-horizontal.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "collapse",
+    "fold",
+    "vertical",
+    "dashed"
+  ],
+  "categories": [
+    "arrows",
+    "layout"
+  ]
+}

icons/fold-horizontal.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 12h6" />
+  <path d="M22 12h-6" />
+  <path d="M12 2v2" />
+  <path d="M12 8v2" />
+  <path d="M12 14v2" />
+  <path d="M12 20v2" />
+  <path d="m19 9-3 3 3 3" />
+  <path d="m5 15 3-3-3-3" />
+</svg>

icons/fold-vertical.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "collapse",
+    "fold",
+    "vertical",
+    "dashed"
+  ],
+  "categories": [
+    "arrows",
+    "layout"
+  ]
+}

icons/fold-vertical.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 22v-6" />
+  <path d="M12 8V2" />
+  <path d="M4 12H2" />
+  <path d="M10 12H8" />
+  <path d="M16 12h-2" />
+  <path d="M22 12h-2" />
+  <path d="m15 19-3-3-3 3" />
+  <path d="m15 5-3 3-3-3" />
+</svg>

icons/heading-1.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h1",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading-2.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h2",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading-3.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h3",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading-4.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h4",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading-5.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h5",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading-6.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h6",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/heading.json

@@ -1,7 +1,13 @@
 {
   "$schema": "../icon.schema.json",
-  "tags": [],
+  "tags": [
+    "h1",
+    "html",
+    "markup",
+    "markdown"
+  ],
   "categories": [
-    "text"
+    "text",
+    "development"
   ]
 }

icons/merge.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "combine",
+    "join",
+    "unite"
+  ],
+  "categories": [
+    "development",
+    "arrows"
+  ]
+}

icons/merge.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m8 6 4-4 4 4" />
+  <path d="M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" />
+  <path d="m20 22-5-5" />
+</svg>

icons/microscope.svg

@@ -13,6 +13,6 @@
   <path d="M3 22h18" />
   <path d="M14 22a7 7 0 1 0 0-14h-1" />
   <path d="M9 14h2" />
-  <path d="M8 6h4" />
+  <path d="M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z" />
-  <path d="M13 10V6.5a.5.5 0 0 0-.5-.5.5.5 0 0 1-.5-.5V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v2.5a.5.5 0 0 1-.5.5.5.5 0 0 0-.5.5V10c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2Z" />
+  <path d="M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3" />
 </svg>

icons/parentheses.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "token",
+    "parenthesis",
+    "parens",
+    "brackets",
+    "parameters",
+    "arguments",
+    "args",
+    "input",
+    "call",
+    "maths",
+    "formula",
+    "function"
+  ],
+  "categories": [
+    "development",
+    "files",
+    "maths"
+  ]
+}

icons/parentheses.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 21s-4-3-4-9 4-9 4-9" />
+  <path d="M16 3s4 3 4 9-4 9-4 9" />
+</svg>

icons/parking-square-off.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M3.59 3.59A2 2 0 0 1 5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-.59 1.41" />
+  <path d="M3.6 3.6A2 2 0 0 1 5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-.59 1.41" />
-  <path d="M3 8.66V19c0 1.1.9 2 2 2h10.34" />
+  <path d="M3 8.7V19a2 2 0 0 0 2 2h10.3" />
   <path d="m2 2 20 20" />
   <path d="M13 13a3 3 0 1 0 0-6H9v2" />
-  <path d="M9 17v-2.34" />
+  <path d="M9 17v-2.3" />
 </svg>

icons/plug-zap.svg

@@ -9,10 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <rect x="8" y="13" width="8" height="6" rx="2" />
   <path d="m13 2-2 2.5h3L12 7" />
   <path d="M12 22v-3" />
   <path d="M10 13v-2.5" />
-  <path d="M10 12.5v-2" />
+  <path d="M14 13v-2.5" />
-  <path d="M14 12.5v-2" />
-  <path d="M16 15a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2z" />
 </svg>

icons/radiation.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "radioactive",
+    "nuclear",
+    "fallout",
+    "waste",
+    "atomic",
+    "physics",
+    "particle",
+    "element",
+    "molecule"
+  ],
+  "categories": [
+    "science"
+  ]
+}

icons/radiation.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 12h0" />
+  <path d="M7.5 4.2c-.3-.5-.9-.7-1.3-.4C3.9 5.5 2.3 8.1 2 11c-.1.5.4 1 1 1h5c0-1.5.8-2.8 2-3.4-1.1-1.9-2-3.5-2.5-4.4z" />
+  <path d="M21 12c.6 0 1-.4 1-1-.3-2.9-1.8-5.5-4.1-7.1-.4-.3-1.1-.2-1.3.3-.6.9-1.5 2.5-2.6 4.3 1.2.7 2 2 2 3.5h5z" />
+  <path d="M7.5 19.8c-.3.5-.1 1.1.4 1.3 2.6 1.2 5.6 1.2 8.2 0 .5-.2.7-.8.4-1.3-.5-.9-1.4-2.5-2.5-4.3-1.2.7-2.8.7-4 0-1.1 1.8-2 3.4-2.5 4.3z" />
+</svg>

icons/split.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "break",
+    "disband",
+    "divide",
+    "separate",
+    "branch",
+    "disunite"
+  ],
+  "categories": [
+    "development",
+    "arrows"
+  ]
+}

icons/split.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 3h5v5" />
+  <path d="M8 3H3v5" />
+  <path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" />
+  <path d="m15 9 6-6" />
+</svg>

icons/text-select.json

@@ -2,10 +2,14 @@
   "$schema": "../icon.schema.json",
   "tags": [
     "find",
-    "search"
+    "search",
+    "selection"
   ],
   "categories": [
     "text",
     "cursors"
+  ],
+  "aliases": [
+    "text-selection"
   ]
-}
+}

icons/unfold-horizontal.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "collapse",
+    "fold",
+    "vertical",
+    "dashed"
+  ],
+  "categories": [
+    "arrows",
+    "layout"
+  ]
+}

icons/unfold-horizontal.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 12h6" />
+  <path d="M8 12H2" />
+  <path d="M12 2v2" />
+  <path d="M12 8v2" />
+  <path d="M12 14v2" />
+  <path d="M12 20v2" />
+  <path d="m19 15 3-3-3-3" />
+  <path d="m5 9-3 3 3 3" />
+</svg>

icons/unfold-vertical.json

@@ -1,9 +1,13 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "menu"
+    "arrow",
+    "expand",
+    "vertical",
+    "dashed"
   ],
   "categories": [
+    "arrows",
     "layout"
   ]
 }

icons/unfold-vertical.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 22v-6" />
+  <path d="M12 8V2" />
+  <path d="M4 12H2" />
+  <path d="M10 12H8" />
+  <path d="M16 12h-2" />
+  <path d="M22 12h-2" />
+  <path d="m15 19-3 3-3-3" />
+  <path d="m15 5-3-3-3 3" />
+</svg>

packages/lucide-react-native/src/createLucideIcon.ts

@@ -30,7 +30,9 @@ const createLucideIcon = (iconName: string, iconNode: IconNode) => {
             const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg);
             return createElement(NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>, attrs);
           }),
-          ...(children as ReactNode[] || []),
+          ...(
+            (Array.isArray(children) ? children : [children]) || []
+          ),
         ],
       ),
   );

packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap

@@ -5,3 +5,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
 exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
 
 exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
+
+exports[`Using lucide icon components > should work with a single child component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"single-child\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"child\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg></svg>"`;
+
+exports[`Using lucide icon components > should work with several children components 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"multiple-children\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"child1\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"child2\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg></svg>"`;

packages/lucide-react-native/tests/lucide-react-native.spec.tsx

@@ -80,4 +80,40 @@ describe('Using lucide icon components', () => {
 
     expect( container.innerHTML ).toMatchSnapshot();
   });
+
+  it('should work with a single child component', () => {
+    const testId = "single-child";
+    const childId = "child";
+
+    const { container, getByTestId } = render(
+      <Grid data-testid={testId}>
+        <Grid data-testid={childId}/>
+      </Grid>
+    );
+    const { children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
+    const lastChild = children[children.length -1];
+
+    expect(lastChild).toEqual(getByTestId(childId));
+    expect(container.innerHTML).toMatchSnapshot();
+  })
+
+  it('should work with several children components', () => {
+    const testId = "multiple-children";
+    const childId1 = "child1";
+    const childId2 = "child2";
+
+    const { container, getByTestId } = render(
+      <Grid data-testid={testId}>
+        <Grid data-testid={childId1}/>
+        <Grid data-testid={childId2}/>
+      </Grid>
+    );
+    const {children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
+    const child1 = children[children.length - 2];
+    const child2 = children[children.length - 1];
+
+    expect(child1).toEqual(getByTestId(childId1));
+    expect(child2).toEqual(getByTestId(childId2));
+    expect(container.innerHTML).toMatchSnapshot();
+  })
 })