SVG attribute viewBox is missing in bundle file

[satoshi-cyber]

When I'm trying to use a SVG as React component

import { ReactComponent as Close } from '../../assets/close.svg';

the viewBox attribute is missing in generated bundle file

function SvgClose(props) {
  return /*#__PURE__*/React$1.createElement("svg", _extends$v({
    width: 24,
    height: 24,
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), _path$u || (_path$u = /*#__PURE__*/React$1.createElement("path", {
    vectorEffect: "non-scaling-stroke",
    d: "M6 6l12 12M6 18L18 6",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeMiterlimit: 10,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  })));
}

even though it exists on SVG

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path vector-effect="non-scaling-stroke" d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

I'm using this to make the bundle:

microbundle-crl --no-compress --css-modules false --format modern,cjs

[developit]

I believe this should work:

// put this in a file called ".svgrrc.js":
module.exports = {
  svgoConfig: {
    plugins: {
      removeViewBox: false
    }
  }
};

[developit]

FWIW this is something specific to microbundle-crl, which is a fork. Microbundle itself does not allow importing SVGs.

[ooanishoo]

.svgrrc.js

Hi @developit, where did you create this file?