title: How can I dynamically replace parts of a .svg file using javascript?
body: <p>I am importing a svg file to use as an image in my project. The svg file has a color in it that I want to change to my own color (which is not known ahead of time). I realize getSourceCode and setSourceCode are not real methods but I used them to hopefully demonstrate what I am trying to accomplish.</p>
  
  <pre><code>import React from "react";
  import emptyOrderImage from "./images/illustrations/empty_order.svg";
  
  function CurrentOrder(props) {
    // Trying to get svg source code as string
    let svgSourceCodeString = emptyOrderImage.getSourceCode();
  
    // Assume the new color was dynamically loaded
    const newColor = "#FAFAFA";
  
    // I am trying to replace all occurences of #FFA500 with the new color
    const newSourceCode = originalSourceCode.replace(/#FFA500/gi, newColor);
  
    // Now I need to set svg to new source code
    emptyOrderImage.setSourceCode(newSourceCode);
  
    return (
      &lt;div style={{ flex: "display", justifyContent: "center" }}&gt;
        &lt;img src={emptyOrderImage} style={{ width: 200, height: 200 }} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default CurrentOrder;
  </code></pre>