Hello, I have a bunch of icons in SVG format and I'd like to import them as components, stylable with tailwindcss
I tried using @svgr/webpack with this nextjs config

    webpack: (config, { isServer }) => {
        if (!isServer) {
            config.optimization.minimizer.push(new CssMinimizerPlugin())
        }

        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        })

        return config
    },

Here is how I use my icon

import MyIcon from '@/app/assets/icons/lol.svg'

const Component = () => {
    return (
            <MyIcon />
    )
}

But end up with this error : React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

How do you handle this on your side ?
Many thanks