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 correctly with the file loader.

However the example shows using a background image like this:

.icon {    background-image: url(./logo.svg); } 

which works fine, but I want to have an inline svg image how do I do this to include my logo.svg inline in my react component?

import React, { Component } from 'react'  class Header extends Component {    render() {     return (         <div className='header'>             <img src={'./logo.svg'} />         </div>     );   } };  export default Header 

Answer 1

Actually Michelle's answer pointed me in the right direction, and that works nicely for loading an svg file with webpack and using it as your <img> src

However to actually get the inline svg, I needed to do the following:

Instead of file-loader use svg-inline-loader as your svg loader:

{ test: /\.svg$/, loader: 'svg-inline-loader' }

Then to load the svg inline in a component:

import React, { Component } from 'react' import logo from "./logo.svg";  class Header extends Component {    render() {     return (         <div className='header'>           <span dangerouslySetInnerHTML={{__html: logo}} />         </div>     );   } };  export default Header 

It looks like there is an inline svg wrapper for react svg-inline-react which would be another option instead of the <div dangerouslySetInnerHTML={{__html: mySvg}} />

Answer 2

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());