Online transformer keeps `className` and removes `viewBox` for React Native components

[LoyalPotato]

🐛 Bug Report

When converting svgs to React Native components, the prop className is kept and viewBox is removed.

To Reproduce

Steps to reproduce the behavior:

• Convert svg with a class prop to React Native type

Expected behavior

Remove the className and keep viewBox.

Screenshot

[headfire94]

viewBox can be saved with

svgr({
      svgoConfig: {
        plugins: [
          { name: 'removeViewBox', active: false },
        ],
      },
    })

[headfire94]

class can be removed with

  {
            name: 'removeAttrs',
            params: { attrs: 'class' },
          },

[LoyalPotato]

@headfire94 But shouldn't it keep those values when transforming by default? It keeps the width, fill and even xmlns but not class and viewbox?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[uhrohraggy]

Can we add this to the documentation as well as how to trigger this via the CLI? this caught us by surprise and wondering why our SVGs wouldn't scale.

[uhrohraggy]

For any that come across this, the viewbox gets removed as part of SVGO (https://github.com/svg/svgo). You can disable SVGO via --no-svgo option i.e. "icons": "npx @svgr/cli --jsx-runtime automatic --typescript --out-dir app/components/icons --no-svgo -- app/icons",

If you still want to opt into SVGO but not have it remove viewbox, you can pass your JSON in via --svgo-config directly as JSON or via a file ref. I preferred setting up svgo.config.js at the root

//svgo.config.js
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

Huge thanks @headfire94 for your comment, amazing help!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.