fix: do not use SVGr on URL-imported SVGs

Created by: cprecioso

At my company, we're trying to create a UI Component library. It imports SVGs and font files, and we'd like for its use to require no configuration. Thus, we're shipping code like this:

-import iconUrl from "./icon.svg" // Syntax A. Requires a bundler + config
+const iconUrl = new URL("./icon.svg", import.meta.url) // Syntax B. Requires no bundler or config

This is well-supported in runtimes (caniuse), and bundlers (e.g.: webpack 5+, parcel 2+, Vite, Next.js 11+). This construct is supposed to return a URL to the asset.

However, react-scripts's Webpack configuration adds SVGr to every SVG import, Syntax A or B, which breaks the assumptions of libraries that expect the URL to point to a raw asset (in our case, an SVG file) and instead get a URL to SVGr'd JS file.

This PR uses a Webpack rule option to disable SVGr in SVG files imported through new URL("./file.svg", import.meta.url).

How to test

1. Run create-react-app and create a new app.

2. Change the following in src/App.js:

   -import logo from './logo.svg';
    import './App.css';
   
   +const logo = new URL("./logo.svg", import.meta.url).href;
   +

3. Run the app through start

The result is as follows:

Before this patch:

After this patch: