Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name

I’m trying to have react-svg-loader 2.1.0 to load SVG using webpack, but I’m getting this error:

Failed to execute 'createElement' on 'Document': The tag name provided ('/packs/bundles/Project/components/LogoPage/images/name-f15c8edd029d0f795dd71e3e39079866.svg') is not a valid name I configured everything vanilla from the docs:

//webpack config: 
module: {
    loaders: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
  }

the import statement in my react component:

import Logo from "./images/name.svg"; Not sure what other info might be relevant.

[ArturBaybulatov]

import {ReactComponent as ArrowDownIcon} from '../assets/arrow-down.svg';

Importing like this worked for me.

The SVG is imported as a real react component, so can be used like this:

<ArrowDownIcon/>

Extra params are automatically accepted:

<ArrowDownIcon className="full-width" height={123}/>

[pedromagalhaes]

I solved this issue using a Babel Plugin: https://www.npmjs.com/package/babel-plugin-inline-react-svg

Installation: yarn add babel-plugin-inline-react-svg --dev

Component import React from 'react'; import CloseSVG from './close.svg'; const MyComponent = () => <CloseSvg />;

Babel { "plugins": [ "inline-react-svg" ] }