How to differentiate webpack loaders?

Question

webpack

Such situation. There are svg icons. And I need to make it so that if the import of the icon goes to less - then use url-loader for example, and if in tsx - then @svgr/webpack; How can I do that?

Answer 1

For those who are interested, I solved the problem like this:

{
                test: /\.svg$/,
                use: ['@svgr/webpack'],
                issuer: {
                    include: /\.tsx$/,
                    exclude: /\.less?$/,
                },
            },
            {
                test: /\.svg/,
                use: {
                    loader: 'svg-url-loader',
                    options: {},
                },
                issuer: {
                    include: /\.less$/,
                    exclude: /\.tsx?$/,
                },
            },