Loading SVGR as URL react

instructions.md

First, install url-loader along side with svgr: yarn add -D url-loader.

Add the loader to svg test option:

{
  test: /\.svg$/,
  use: ["@svgr/webpack", "url-loader"],
},

Now, we can get the url and/or the svg React Component from the svg file:

import windorURL, {
  ReactComponent as WindowImage,
} from "../../../../../images/svg/event-hero/window.svg"

Getting both url and React Component.

import couchURL from "../../../../../images/svg/event-hero/couch.svg"

Getting just the url.

import { ReactComponent as BookImage } from "../../../../../images/svg/event-hero/book.svg"

Getting just the React Component.

That's all.

Now, if we want just remove the svg dimensions, add the next to the webpack.config.js:

        {
          test: /\.svg$/,
          use: [
            {
              loader: "@svgr/webpack",
              options: {
                svgoConfig: {
                  plugins: {
                    removeDimensions: true,
                  },
                },
              },
            }
          ],
        },

or if you want make the viewBox property available, add the next to the webpack.config.js:

        {
          test: /\.svg$/,
          use: [
            {
              loader: "@svgr/webpack",
              options: {
                svgoConfig: {
                  plugins: {
                    removeViewBox: false,
                  },
                },
              },
            }
          ],
        },