Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I can`t delete prefix in className in svg #411

Closed
dollock opened this issue Mar 17, 2020 · 5 comments
Closed

I can`t delete prefix in className in svg #411

dollock opened this issue Mar 17, 2020 · 5 comments

Comments

@dollock
Copy link

dollock commented Mar 17, 2020

How I understand, @svgr/webpack add prefix (name of svg) for className (for React Project). For example, if my svg named 'name1.svg' and had class="class1", in browser I see className="name1_class1". I want delete prefix and I try use svgo plugin options:

    test: /\.svg$/,
      include: PATHS.images,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [{
              prefixIds: false
            }]
          }
        }
      }]

Also I use another options:

    test: /\.svg$/,
      include: PATHS.images,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [{
              cleanupIDs: {
                prefix: ''
              }
            }]
          }
        }
      }]

But it doesn`t work. Please, help me how delete a prefix for className

"@svgr/webpack": "^5.2.0",
"webpack": "^4.41.5",

@open-collective-bot
Copy link

Hey @dollock 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

@ghostd
Copy link

ghostd commented Mar 20, 2020

Hi,
Maybe a duplicate of #400

@gregberge
Copy link
Owner

Yeah duplicate of #400

@qizeng19
Copy link

qizeng19 commented Jul 28, 2022

let me show you the direct code

      options:{
        svgo:true,
        svgoConfig : {
          plugins:[
            {
              name: "prefixIds",
              params: {
                prefixIds: false,
                prefixClassNames: false
              }
            },
          ]
        }
      }```

@ggluta
Copy link

ggluta commented Oct 3, 2022

This is the correct config that eventually worked for me, with the mention that I am using NextJS, so the following snippet is part of my next.config.js file.

webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: {
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [
              {
                name: 'prefixIds',
                active: false
              }
            ]
          }
        }
      }
    })
    return config
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants