title: Inline SVGs with Webpack, React and Typescript
body: <p>I am trying to use SVG files for a React app I write to get used to it. I am using Webpack and Typescript for coding.
  I am having a lot of trouble to import SVG files as inline SVG code in my components.</p>
  
  <p>My SVG files are in a folder separate from my components folder and I would like to get the content of an SVG file from inside a component to place it inline.</p>
  
  <p>I tried using <code>svg-inline-loader</code> and <code>react-svg-loader</code> but I can't manage to make any of them work. When I <code>console.log()</code> content of the variable in which I require my SVG file, I have some Javascript code, like a module-declaration, while I expect to find the SVG code instead.</p>
  
  <p>Here is a simple component I am trying to use it in:</p>
  
  <pre><code>import * as React from "react";
  import * as classnames from "classnames";
  import { ITaskProps } from "../interfaces";
  
  export class Task extends React.Component&lt;ITaskProps&gt;
  {
      render()
      {
          let outerClasses = classnames("rt-task", this.props.className);
          let Checkbox = require("svg-inline-loader!../asset/checkbox-unticked.svg");
  
          return (
              &lt;span className={outerClasses}&gt;
              { Checkbox }
                  &lt;span className="rt-checkbox-box"&gt;
                      &lt;input type="checkbox" id="rt-task-checkbox" /&gt;
                  &lt;/span&gt;
                  &lt;label className="rt-checkbox-text" htmlFor="rt-task-checkbox"&gt;{this.props.text}&lt;/label&gt;
              &lt;/span&gt;
          )
      }
  }
  </code></pre>
  
  <p>The result of the <code>console.log()</code> (which I removed from my code above) is this:</p>
  
  <pre><code>var _extends = Object.assign || function (target) { for (var i = 1; i &lt;arguments.length; i++) { var source="arguments[i];" for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key]="source[key];" } } } return target; }; function _objectWithoutProperties(obj, keys) { var target="{};" for (var i in obj) { if (keys.indexOf(i)&gt;= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } import React from &amp;quot;react&amp;quot;; export default ((_ref) =&amp;gt; { let { styles = {} } = _ref, props = _objectWithoutProperties(_ref, [&amp;quot;styles&amp;quot;]); return React.createElement( &amp;quot;svg&amp;quot;, _extends({ viewBox: &amp;quot;0 0 100 100&amp;quot;, xmlns: &amp;quot;http://www.w3.org/2000/svg&amp;quot;, fillRule: &amp;quot;evenodd&amp;quot;, clipRule: &amp;quot;evenodd&amp;quot;, strokeLinejoin: &amp;quot;round&amp;quot;, strokeMiterlimit: &amp;quot;1.414&amp;quot; }, props), React.createElement(&amp;quot;circle&amp;quot;, { cx: &amp;quot;50&amp;quot;, cy: &amp;quot;50&amp;quot;, r: &amp;quot;49&amp;quot;, fill: &amp;quot;transparent&amp;quot;, stroke: &amp;quot;#a6a6a6&amp;quot;, strokeWidth: &amp;quot;2&amp;quot; }) ); });
  </code></pre>
  
  <p>I'm sure it is something trivial but I can't find how to do it and I've been looking for a solution since the beginning of the week...</p>
  
  <p>Thank you :-)</p>