Using props on SVGR components dynamically-imported with webpack

[tdriley]

💬 Questions and Help

(This may be a duplicate of unresolved issue here: #724 but I'm not trying to use lazy/suspense as with the issue there).

I'm trying to get svgr SVGs importing dynamically with import(). It kind of works in that you can get the SVG as a component like this, but I'm unable to add props to the imported SVG (as I can with a standard import at the top of the JSX file):

    const ImportedSvg = ({ code })=> {
        const [SvgComponent, setSvgComponent] = useState(null);

        useEffect(()=> {
            import(`ImageImports/${code}.svg`).then(imported=> { // Webpack "sees" this path and uses svgr loader.
                setSvgComponent(imported.default);
            });
            // Or do something similar with async/await.
        }, [code]);

        // I get an error if I try to return the <Instantiated /> component here, so need to return component definition as imported.
        return SvgComponent ? SvgComponent : <LoadingSpinner />
    };

    // This works, but I cannot add props like 'height' to the SVG component, 
    // as I can if i use 'import SvgComponent from "my/svgs/file.svg";'
    <ImportedSvg code={code} />

// webpack.config.js

...
    rules: [{
        test: /public\/svgs.+\.svg$/i,
        use: [
            {
                loader: '@svgr/webpack'
            },
        ]
    }]
...