title: Embed SVGs in JSX at build time?
body: <p>I'm relatively new to React, using create-react-app to build simple prototypes. I'd like to be able to export SVGs from Sketch or a similar design tool and use them in my React app, embedded directly in the JSX since that allows styling via CSS.</p>
  
  <p>This is relatively straightforward with a little effort: copy the exported SVG code out of the original .svg file, tweak how the xmlns attributes are named, done.</p>
  
  <p>But if I have a lot of images and am iterating on them frequently, that becomes incredibly high-effort. I'd like a way to take a directory of SVGs at build time and basically concatenate them into a single .js file, e.g., </p>
  
  <pre><code>const icons = {
      first: &lt;svg&gt;...contents of first svg file...&lt;/svg&gt;,
      second &lt;svg&gt;...contents of second file...&lt;/svg&gt;,
      ...
  }
  </code></pre>
  
  <p>This is relatively trivial to do via shell script or something, but it would be great to integrate into the build process. How would I go about doing something like this?</p>
  
  <p>Thanks!</p>