Resize while keeping the aspect ratio

[loureirorg]

Here's how to set SVGR to resize SVGs while keeping the aspect ratio.

1. Create a .svgrrc.js file:

// .svgrrc.js
module.exports = {
  dimensions: false,
};

2. Now, you can resize your SVGs. Use the "weight" and/or "width" properties:

<MyIcon height={22} />

TL;DR;

I installed SVGR and tried to use it out of the box, but I had some issues:

• Resizing: Changing the "height" property makes the image crop instead of stretch/shrink;
• Positioning: The SVG element position got off;

Resizing

To enable resizing, I found that the <svg> tag has to have a viewBox property to keep the aspect ratio when resizing.

But even when the SVG has the property, SVGR removes it by default, making the image impossible to resize.

To fix this, I enabled the icon option on webpack, which keeps the viewBox:

// ...
config.module.rules.push({
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [{ loader: "@svgr/webpack", options: { icon: true } }],
});
// ...

Resizing using only height or width

Enabling the "icon" option makes the SVG resizable, but you have to provide both "width" and "height" properties. If you don't, the image will have 1em x 1em (16px x 16px), "contained" mode.

To resize the SVG, specify one of the properties (height or width) and set the other to "auto".

Example:

<MyIcon height={22} width="auto" />

Fixing the positioning being off

When you set the width to "auto", the width may get all space available (or none). This won't deform the image but will get more or less space than needed, shifting the other elements.

To fix this, I had to wrap the SVG into a div:

<div><MyIcon height={22} width="auto" /></div>

Using a template to automate the <div> wrapping

Thinking about better ways to wrap the SVG images into <div> tags, I found the template option that applies a template to all imported SVGs:

// svgr-template.js
const template = (variables, { tpl }) => {
  return tpl`

  ${variables.imports}

  ${variables.interfaces}

  function ${variables.componentName}({ containerClassName, ...props }) {
    return (<div className={containerClassName ?? ""}>{${variables.jsx}}</div>);
  };

  ${variables.exports};
  `;
};

module.exports = template;

And set the template option:

// ...
config.module.rules.push({
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: "@svgr/webpack",
      options: { icon: true, template: require("./svgr-template.js") },
    },
  ],
});
// ...

Now, you can call it like this:

<MyIcon height={22} />

If you need to set a custom class for the wrapper, use the containerClassName property.

The dimensions: false option

After all that, I found the option dimensions: false keeps the "viewBox" just like the "icon: true" option. But it also removes the height/width.

Without a width, we don't need to set "width=auto". That means the positioning doesn't go off, we don't need to wrap the SVG in a div, and the template is not necessary.

Conclusion

All we need for resizable SVGs is to set dimensions: false and nothing else. No need for templates or whatever.

I posted this discussion when I didn't know about that and would remove it, but GitHub doesn't allow. So, I'm leaving it here in case this can help anyone.

[KevzPeter]

@loureirorg

Thanks a lot for providing an elaborate explanation as well! Helped me out for a personal project of mine