how to set up an inline svg with webpack

Question

I am wondering how to set up an inline svg with webpack?

I am following the react-webpack-cookbook.

I have my webpack.config set up correc

Answer 1

Here is a simple non-react solution.

1. Install Svg inline loader
2. In webpack.config.js add { test: /\.svg$/, loader: 'svg-inline-loader' }
3. In your js file import svg image and add it to a DOM element like so

  import Svg from './svg.svg';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());