title: how to render an SVG from a server and still have the option to interpolate JSX into it?
body: <p><strong>My goal is to fetch from my own server an SVG and to interpolate the <code>children</code> attribute after the <code>&lt;polygon&gt;&lt;/polygon&gt;</code> tag.</strong></p>
  <p>I am doing this is to add an interactive layer that can be modified by react.</p>
  <p>So far I am able to achieve that by serving  my SVG via react app, but I want to avoid it for security reasons.</p>
  <p>This is my progress so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App = ({children}) =&gt; {
    
  return (
      &lt;svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="#6b9bd2"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="arcs"
      &gt;
    &lt;polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"&gt;&lt;/polygon&gt;
      {children}
      &lt;/svg&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>My ideal solution</strong> should look something like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  
  type ViewBox = {
    x1: string;
    x2: string;
    y1: string;
    y2: string;
  };
  
  interface SVGElement {
    svgContent: string;
    viewBox: ViewBox;
  }
  
  const App: React.FC = ({ children }) =&gt; {
    const [content, setContent] = useState&lt;SVGElement | undefined&gt;();
  
    useEffect(() =&gt; {
      fetch("http://localhost:5000/get-svg-content")
        .then((res) =&gt; res.json())
        .then((data) =&gt; setContent(data))
        .catch((e) =&gt; console.log(e));
    }, []);
  
    if (content === undefined) return &lt;&gt;&lt;/&gt;;
  
    const viewBox = `${content.viewBox.x1} ${content.viewBox.x2} ${content.viewBox.y1} ${content.viewBox.y2}`;
    return (
      &lt;svg viewBox={viewBox}&gt;
        {content.svgContent}
        {children}
      &lt;/svg&gt;
    );
  };
  
  export default App;
  
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://lfbqw1.csb.app/" rel="nofollow noreferrer">codeSandbox</a></p>