SVGs are broken by quotes

[cainlevy]

Bug summary

SVGs used by my components are broken when rendered in Storybook. The data URI appears to be wrapped in double quotes.

Steps to reproduce

1. Create a component like:

import MySVG from 'static/my.svg';

const MyComponent = () => <img src={MySVG} />;

2. Note that the component renders fine in a normal Webpack setup.
3. Note that the component renders a broken image with Storybook's Webpack config.

The problem is that Storybook uses svg-url-loader but does not configure it with noquotes=true.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 4.0.0-alpha.3

Affected platforms

• svg-url-loader 2.3.2

[cainlevy]

If there is a use case for SVGs wrapped in double quotes (CSS?) then I think that use case should be forced to add the quotes. Otherwise svg-url-loader is not drop-in compatible with url-loader.

[Brian-McBride]

The problem with svg-loader is that if you enable the noquotes you break others things (Like Polymer).

The pull request #4260 removes svg-url-loader from the webpack. Here is the value of that module:

svg-url-loader loads SVGs as UTF-8 encoded data urls. The result is smaller and faster to parse than base64.

For Storybook, I'm not sure dealing with turning on/off noquotes is worth the inline size. In your production webpack build you can tweak for super optimized builds based on your project anyway. Greater support for Storybook makes sense over nickling over minor performance gains?

[ndelangen]

I think the solution here would be a custom webpack config?