add props.children so you can inject stuff in your svg (eg: <defs> that can be used with --allow-override-fill)

Author: MoOx

src/adjust-svg.ts

@@ -27,7 +27,13 @@ const prepareSvgProps = (svg: string): string => {
 };
 
 const injectSvgJsProps = (svg: string): string => {
-  return svg.replace(">", " {...props}>");
+  // Inject {...props} and {props.children} just after the opening tag of <svg> or <Svg>
+  // 1. Inject {...props} as before
+  // 2. Immediately after, inject {props.children}
+  // This ensures that children can be injected by React
+  return svg
+    .replace(/(\{\.\.\.props\}>)/, "$1{props.children}")
+    .replace(/(>)/, " {...props}>{props.children}");
 };
 
 const dashToCamelCaseProps = (svg: string): string => {

tests/components/with-native-for-typescript/SVGClean.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGClean = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 30 30" {...props}>
+      {props.children}
       <Path d="m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z" />
     </Svg>
   );

tests/components/with-native-for-typescript/SVGEdgeCaseWidth.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGEdgeCaseWidth = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 512 512" {...props}>
+      {props.children}
       <Path d="M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48" />
     </Svg>
   );

tests/components/with-native-for-typescript/SVGMatrixNegative.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGMatrixNegative = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 288 272" {...props}>
+      {props.children}
       <LinearGradient
         id="a"
         x1="19.028507%"

tests/components/with-native-for-typescript/SVGPctUnit.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGPctUnit = (props: SvgProps) => {
   return (
     <Svg {...props}>
+      {props.children}
       <Circle cx="2%" cy="-4.0%" />
     </Svg>
   );

tests/components/with-native-for-typescript/SVGSimple.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGSimple = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 512 512" {...props}>
+      {props.children}
       <Path
         d="M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48"
         fill="none"

tests/components/with-native-for-typescript/SVGSketchExport.tsx

@@ -28,6 +28,8 @@ import type { SvgProps } from "react-native-svg";
 const SVGSketchExport = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 97 171" {...props}>
+      {props.children}
+
       <G
         id="Page-1"
         stroke="none"

tests/components/with-native-for-typescript/SVGWithFill.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGWithFill = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 30 30" {...props}>
+      {props.children}
       <G fill="none" fillRule="evenodd">
         <Path d="m0 0h30v30h-30z" fill="#dd4b39" />
         <Path

tests/components/with-native-for-typescript/SVGWithStroke.tsx

@@ -28,6 +28,8 @@ import type { SvgProps } from "react-native-svg";
 const SVGWithStroke = (props: SvgProps) => {
   return (
     <Svg viewBox="0 0 512 512" {...props}>
+      {props.children}
+
       <Path
         d="M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z"
         fill="none"

tests/components/with-native-for-typescript/SVGWithStyleAndData.tsx

@@ -28,6 +28,7 @@ import type { SvgProps } from "react-native-svg";
 const SVGWithStyleAndData = (props: SvgProps) => {
   return (
     <Svg {...props}>
+      {props.children}
       <Mask style={{ maskType: "alpha" }} />
       <Circle cx="90" cy="90" data-circle="true" fill="black" />
     </Svg>