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

**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); ``` **THE SECOND VERSION** ``` /** @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); ```