Next.js SVG Configuration: Unable to apply custom colors to SVGs with dual import strategy

[salahbm]

Summary

I'm trying to implement a dual SVG import strategy in Next.js where some SVGs retain their original colors and others can be customized with Tailwind classes. Despite configuring webpack with separate rules for colorable and non-colorable SVGs, I can't get custom colors to apply.

GOAL: when custom color is not passed keep original color, otherwise show custom colored svg

Additional information

/** @type {import('next').NextConfig} */
import createNextIntlPlugin from 'next-intl/plugin';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const withNextIntl = createNextIntlPlugin();

const nextConfig = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.resolve.alias['yjs'] = path.resolve(__dirname, 'node_modules/yjs');
    }
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    );

    // Rule for URL imports
    config.module.rules.push({
      ...fileLoaderRule,
      test: /\.svg$/i,
      resourceQuery: /url/,
    });

    // Rule for colorable SVGs
    config.module.rules.push({
      test: /\.svg$/i,
      resourceQuery: /colorable/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgo: true,
            svgoConfig: {
              plugins: [
                {
                  name: 'removeViewBox',
                  active: false,
                },
                {
                  name: 'removeAttrs',
                  params: { attrs: ['fill'] },
                  active: true,
                },
                {
                  name: 'removeDimensions',
                  active: true,
                },
              ],
            },
            titleProp: true,
            svgProps: {
              width: '1em',
              height: '1em',
            },
          },
        },
      ],
    });

    // Default rule for SVGs with original colors
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: fileLoaderRule.issuer,
      resourceQuery: { not: [/url/, /colorable/] },
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgo: true,
            svgoConfig: {
              plugins: [
                {
                  name: 'removeViewBox',
                  active: false,
                },
                {
                  name: 'removeAttrs',
                  params: { attrs: ['fill'] },
                  active: true,
                },
                {
                  name: 'removeDimensions',
                  active: true,
                },
              ],
            },
            titleProp: true,
            svgProps: {
              width: '1em',
              height: '1em',
            },
          },
        },
      ],
    });

    fileLoaderRule.exclude = /\.svg$/i;
    return config;
  },
};

export default withNextIntl(nextConfig);

Example

No response

[salahbm]

I have tried in this way as well, but can not find the solution (

/** @type {import('next').NextConfig} */
import createNextIntlPlugin from 'next-intl/plugin';
import path from 'path';
import { fileURLToPath } from 'url';
const __dirname = fileURLToPath(new URL('.', import.meta.url));
const withNextIntl = createNextIntlPlugin();
const nextConfig = {
  webpack(config, { isServer }) {
    if (!isServer) {
      // Ensure that all imports of 'yjs' resolve to the same instance
      config.resolve.alias['yjs'] = path.resolve(__dirname, 'node_modules/yjs');
    }
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg'),
    );
    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // Handle *.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // Exclude *.svg?url
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgo: true,
              svgoConfig: {
                plugins: [
                  {
                    name: 'removeViewBox',
                    active: false,
                  },
                  {
                    name: 'removeAttrs',
                    params: { attrs: '(fill|stroke)' },
                  },
                  {
                    name: 'removeDimensions',
                    active: true,
                  },
                ],
              },
              titleProp: true,
              svgProps: {
                width: '1em',
                height: '1em',
              },
            },
          },
        ],
      },
    );
    fileLoaderRule.exclude = /\.svg$/i;
    return config;
  },
};
export default withNextIntl(nextConfig);