props classname not append to svg classname and replaced in nextjs

[sys113]

🐛 Bug Report

need props className append to svg classes , but It is now being replaced props className to svg class

To Reproduce

// next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg"),
    );
    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/,
      },
      {
        test: /\.svg$/i,
        issuer: { not: /\.(css|scss|sass)$/ },
        resourceQuery: { not: /url/ },
        loader: "@svgr/webpack",
        options: {
          svgoConfig: {
            plugins: [
              {
                name: "prefixIds",
                params: {
                  prefixIds: false,
                  prefixClassNames: false,
                },
              },
            ],
          },
        },
      },
    );
    fileLoaderRule.exclude = /\.svg$/i;
    return config;
  },
};

module.exports = nextConfig;

// home.svg

<svg width="24" height="24" viewBox="0 0 24 24" fill="var(--color-icon-2)" class="bg-red-200">
   // ...
</svg>

// component.tsx

import IconHome from "@/assets/icons/home.svg";

return (
    <IconHome className="fill-blue-400" />
)

Expected behavior

<svg width="24" height="24" viewBox="0 0 24 24" fill="var(--color-icon-2)" class="bg-red-200 fill-blue-400">
    // ...
</svg>

os

## System:
 - OS: Windows 11 10.0.22621
 - CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
 - Memory: 7.82 GB / 15.31 GB
## Binaries:
 - Node: 21.1.0 - C:\Program Files\nodejs\node.EXE
 - Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
 - npm: 10.2.1 - C:\Program Files\nodejs\npm.CMD
## npmPackages:
 - @svgr/webpack: ^8.1.0 => 8.1.0

[AmirHosseinKarimi]

Hmm. I spent about 3 hours creating a custom template to append the className prop to the SVG class attribute.
But, I realized that is not necessary!
You shouldn't add the class attribute to the SVG file.
Because it doesn't make sense!

You can use the class attribute for path elements; SVGR will convert it to the style attribute and make it inline.

But, the class attribute for the SVG element is useless. Because the SVG file is in a separate context from the page. Like an isolated component.
Unless you directly inject an SVG element to the code which means you do not use the SVGR in this case.

[sys113]

Hmm. I spent about 3 hours creating a custom template to append the className prop to the SVG class attribute. But, I realized that is not necessary! You shouldn't add the class attribute to the SVG file. Because it doesn't make sense!

You can use the class attribute for path elements; SVGR will convert it to the style attribute and make it inline.

But, the class attribute for the SVG element is useless. Because the SVG file is in a separate context from the page. Like an isolated component. Unless you directly inject an SVG element to the code which means you do not use the SVGR in this case.

Excellent, thanks! :D