props classname not append to svg classname and replaced in nextjs

[hamid-dionysus]

🐛 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.

[hamid-dionysus]

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

[trungtin]

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.

I don't get what you are saying. Adam Wathan did recommend adding Tailwind classes to SVG element here https://www.youtube.com/watch?v=MbUyHQRq2go&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=13

When I first tried to add the classes to svg element, they didn't work, but later I realized because tailwind doesn't detect the usage and prune these classes from the final CSS file. When I included the svg file to tailwind config, thing seems to work fine.

{
  // ...other tailwind config
  content: ["src/**/*.{ts,tsx,svg}"] // <- include the svg file type
}