breaking change(svgr): disable mixed import by default

[chenjiahan]

Summary

Disable the mixed import of SVGR plugin by default.

What is mixed import

Mixed import refers to exporting an SVG file as a URL and a React component at the same time:

import logoUrl, { ReactComponent as Logo } from './logo.svg';

console.log(logoUrl); // -> string
console.log(Logo); // -> React component

Why not mixed import

• Large bundle size: Mixed import results in a single SVG being compiled into two types of code, increasing the bundle size, and the default export cannot be tree-shaken.
• Slow compilation: Mixed import causes additional compilation overhead. Even if the code does not use the ReactComponent export, it will still be compiled by SVGR. The compilation overhead of SVGR is high because it is based on babel.

Compatible with CRA

CRA allows the mixed import of SVG by default. For projects migrating from CRA, mixedImport can be manually enabled:

pluginSvgr({
  mixedImport: true,
});

Checklist

• Tests updated.
• Documentation updated.