Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using props on SVGR components dynamically-imported with webpack #945

Open
tdriley opened this issue Feb 19, 2024 · 0 comments
Open

Using props on SVGR components dynamically-imported with webpack #945

tdriley opened this issue Feb 19, 2024 · 0 comments

Comments

@tdriley
Copy link

tdriley commented Feb 19, 2024

💬 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'
            },
        ]
    }]
...
@tdriley tdriley changed the title Using props on dynamically-imported svgr SVG componentsn b Using props on webpack dynamically-imported svgr SVG components Feb 19, 2024
@tdriley tdriley changed the title Using props on webpack dynamically-imported svgr SVG components Using props on SVGR components dynamically-imported with webpack Feb 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant