title: ReactJS - Embed Svg image using D3
body: <p>I am using react + webpack + d3.</p>
  
  <p>I am building a dynamic SVG graph using D3.
  I can add image an <code>SVG</code> as follows in react:</p>
  
  <pre><code>import file_1 from '../../icons/03_file_reg.svg';
  
  &lt;image src={file_1}... /&gt;
  </code></pre>
  
  <p>This works. But I am trying to figure out how to do it with <code>D3</code>:</p>
  
  <pre><code>&lt;svg id="test_svg"&gt;
  
  &lt;/svg&gt;  
  
  d3.select("#test_svg").append("image").attr("xlink:href", {file_1}).attr("width", 10)....
  </code></pre>
  
  <p>This doesn't work.</p>
  
  <p>I have seen another way to do it like so: <a href="https://stackoverflow.com/questions/12975929/how-to-use-svg-file-for-image-source-in-d3">how to use svg file for image source in D3
  </a></p>
  
  <p>but his forces me to use static path to my svg instead of importing. is this the only way to do it? or can i use import some other way?</p>