SVGR preset

[shilman]

We get a lot of issues relating to inline SVGs. Anybody want to write a preset for it? See e.g.

https://github.com/storybookjs/storybook/issues/6758#issuecomment-495863544

[hcz]

It seems to me it is not possible now. I have approached the problems related to this.

My storybook config contains a hack to build static files without hash in theirs names.

module.rules = module.rules.map((rule) => {
    if (rule.query && rule.query.name) {
        rule.query.name = 'static/media/[name].[ext]';
    }
    return rule;
});

This works in webpack config, but does not work inside a preset. Problem is somewhere here: https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config.js#L8 'cause webpack config builds on top of an empty object.

So config.module.rules.map from issue would not work as expected in preset.

[benedfit]

I've had a pop at one for my own personal use https://github.com/newhighsco/storybook-preset/tree/master/src/addons/preset-svgr I'd be up for collaborating on extracting it out into an official preset

It currently support inlineing of all .svg files, and as if there is the need to just use the path, as per Storybook's default behaviour, the file can be given the extension .url.svg to allow that