This idea comes from the chat with @mor10 in #14590 where he shared how one can extend default webpack config with custom loaders. It sparked my interest as we still can improve our workflow around using SVG files. To bridge ReactDOM and React Native we introduce wrapper component for all used SVG tag types in #9685. However, it would be great to be able to use regular SVG files without any manual modification and let Babel (to work with npm packages out of the box in contrast to webpack) do the trick.

My initial reaction from #14590 (comment):

I was looking into https://github.com/smooth-code/svgr and I wasn't aware it has so many useful packages in addition to CLI tool and webpack loader. It makes me wonder if we shouldn't redefine the way we handle SVG icons and maybe start using files with SVGs and tackle them with custom Babel loader which would convert them to React components on the fly providing a unified format with both React web and React Native can process.

This is what @mor10 shared in #14590 (comment):

I would back the inclusion of SVGR 100%. It makes adding and using SVGs in blocks significantly easier and removes the need for custom workarounds. Here's how I'm using it to add a block logo as a React component:

import customLogoURL, { ReactComponent as customLogo } from "./logo.svg";

registerBlockType("block/myblock", {
  title: __("A Block", "myblocs"),
  icon: {
    src: customLogo // The React component
  },
  category: "regular",
  attributes: {
    blockImage: {
      type: "string",
      default: customLogoURL // The URL to the original SVG
    }
  },
  (...)
}

I did a quick check on the SVGR monorepo and found some useful packages which could work as a good example of how we could customize things:

• https://github.com/smooth-code/svgr/blob/master/packages/babel-plugin-transform-react-native-svg/src/index.js - Babel plugin which replaces SVG HTML tags with their React Native alternatives
• https://github.com/smooth-code/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/index.js - Babel plugin which converts SVG HTML tags into file exporting React component