require instead of import

[fernandopasik]

I'd like to use this babel plugin with require declarations and it doesn't seem to be working.

require('icon.svg')

I'm getting the usual error SyntaxError: Unexpected token < that is when the plugin is not there

[prasannavl]

I'm getting the same. Only import syntax seems to work. Any direct way to parse require as well?

[kesne]

The plugin looks specifically for imports: https://github.com/kesne/babel-plugin-inline-react-svg/blob/master/src/index.js#L19

I use ES Module Syntax in all of my projects, so I haven't bothered to add support for require. I would happily accept a PR that did though!

I've made it (miraculously) work for myself here.

I'm also using Webpack/TypeScript (those guys where the ones changing the import syntax to require in the first place), and they compile the code expecting an ES6 module structure. To match that, I changed how the SVG function is returned, so that it's within an object's default property, as you can see below.

var default_avatar_svg_1 = function () {
    function default_avatar_svg_1(props) {
        return React.createElement("svg", (0, _extends3.default)({
            version: "1",
            xmlns: "http://www.w3.org/2000/svg",
            width: "21.333",
            height: "21.333",
            viewBox: "0 0 16.000000 16.000000"
        }, props), React.createElement("path", {
            d: "…"
        }));
    }

    return {
        default: default_avatar_svg_1
    };
}();

Thus, I haven't created a PR here.

Although it works, I'm not particularly proud of the whole thing. It's also the first time I fiddle within these three technologies, so I'm sure I might have done something stupid there. If any of you knows anything that could help me there, please do let me know!

[yn5]

+1 Because this would allow to import a complete folder with require.context.

[fernandopasik]

seems to have been fixed by #28