Docz: Does not work with SVGR

[danielbayerlein]

Bug Report

Describe the bug

docz does not work with SVGR. I get the following error:

Failed to execute 'createElement' on 'Document': The tag name provided ('/static/img/test.svg') is not a valid name.

To Reproduce

1. Add @svgr/webpack as dependency
2. Add the SVGR-loader to the webpack configuration:

{
  test: /\.svg$/,
  use: {
    loader: '@svgr/webpack',
    options: {
      icon: true
    }
  }
}

1. Add a dummy test.svg to the /svg folder
2. Create a dummy index.mdx file at the project root

---
name: Icon
---

import { Playground } from 'docz'
import Icon from './svg/test.svg'

# Icon

<Playground>
  <Icon />
</Playground>

1. Start docz...

I also tested it with a modifyBundlerConfig with the same result.

modifyBundlerConfig: config => {
  config.module.rules.push({
    test: /\.svg$/,
    use: {
      loader: '@svgr/webpack',
      options: {
        icon: true
      }
    }
  })

  return config
}

Expected behavior

The icon is displayed.

Enviroment

• OS: macOS 10.13.5
• Node/npm version: Node.js v8.11.3 / npm 6.2.0

[danielbayerlein]

Another test with svg-inline-loader produced the same error. Looks like a problem with webpack loaders.

[pedronauck]

By default we're using file-loader as svg loader, so what you can do is replace it to use svgr loader:

export default {
  modifyBundlerConfig: config => {
    const idx = config.module.rules.findIndex(
      r => r.test.toString() === '/\\.(svg)(\\?.*)?$/'
    )

    config.module.rules[idx] = {
      test: /\.svg$/,
      use: {
        loader: '@svgr/webpack',
      },
    }

    return config
  },
}

[danielbayerlein]

Thank you 🌻

[danielbayerlein]

Now you can use the docz-plugin-svgr (1ac1ea8) plugin! 🕺