### SVG rendering issue

#### Scenario 1: default config

- Webpack config:

{ 
    test: /\.svg$/,
    issuer: /\.(js|ts|md)x?$/,
    use: 
        {
            loader: '/Users/christineschorn/Projects/99designs/frontend/node_modules/@svgr/webpack/dist/index.js',
            options: { svgo: false, titleProp: true, ref: true }
        },
        {
            loader: '/Users/christineschorn/Projects/99designs/frontend/node_modules/file-loader/dist/cjs.js',
            options: { name: '[name].[hash].[ext]' }
        }
}

- SVGs render as asset URLs

#### Scenario 2: svg-inline-loader
- Webpack config:

config.module.rules.unshift({
    test: /\.svg$/,
    use: [{ loader: 'svg-inline-loader?classPrefix' }],
    type: 'javascript/auto',
});

This is what we have in our other webpack configs. I'm using `unshift` so it doesn't get overwritten by the other svg loaders in the default config which happens when using `push` (which is what we do in all our other webpack configs)

- SVGs render as variable assignments and function definitions

var _path, _circle, _path2; var _excluded = ["title", "titleId"]; function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i = 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i = 0) continue; target[key] = source[key]; } return target; } import * as React from "react"; import { forwardRef } from "react"; var SvgBrandingStageNew = (_ref, ref) => { var { title, titleId } = _ref, props = _objectWithoutProperties(_ref, _excluded); return /*#__PURE__*/React.createElement("svg", _extends({ width: 65, height: 64, viewBox: "0 0 65 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: ref, "aria-labelledby": titleId }, props), title ? /*#__PURE__*/React.createElement("title", { id: titleId }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.6494 6C2.31809 6 2.00246 6.09516 1.71538 6.26725C1.50558 6.39301 1.31102 6.55986 1.13674 6.76068C1.06771 6.84023 1.00185 6.92511 0.939487 7.01488C0.844516 7.15159 0.757646 7.29963 0.67998 7.45744C0.640834 7.53698 0.604027 7.61901 0.569699 7.70332C0.478052 7.92839 0.404076 8.16974 0.350459 8.42355C0.285108 8.73291 0.25 9.06078 0.25 9.40026V14.106H1.75V9.40026C1.75 9.16386 1.77448 8.93992 1.81807 8.73359L2.0065 7.84159L2.4866 7.5538C2.56298 7.50802 2.61462 7.5 2.6494 7.5H7.4981V6H2.6494ZM13.428 6V7.5H23.1254V6H13.428ZM29.0552 6V7.5H38.7526V6H29.0552ZM44.6825 6V7.5H49.5312C49.566 7.5 49.6176 7.50802 49.694 7.5538L50.1741 7.84159L50.3625 8.73359C50.4061 8.93992 50.4306 9.16386 50.4306 9.40026V14.106H51.9306V9.40026C51.9306 9.06078 51.8955 8.73291 51.8302 8.42355C51.7765 8.16974 51.7026 7.92839 51.6109 7.70332C51.5766 7.61901 51.5398 7.53698 51.5006 7.45744C51.423 7.29963 51.3361 7.15159 51.2411 7.01488C51.1788 6.92511 51.1129 6.84023 51.0439 6.76068C50.8696 6.55986 50.675 6.39301 50.4652 6.26725C50.1782 6.09516 49.8625 6 49.5312 6H44.6825ZM51.9306 19.6546H50.4306V29.066H51.9306V19.6546ZM51.9306 34.6146H50.4306V44.026H51.9306V34.6146ZM51.9306 49.5746H50.4306V54.2804C50.4306 54.5168 50.4061 54.7407 50.3625 54.947L50.1741 55.839L49.694 56.1268C49.6176 56.1726 49.566 56.1806 49.5312 56.1806H44.6825V57.6806H49.5312C49.8625 57.6806 50.1782 57.5855 50.4652 57.4134C50.675 57.2876 50.8696 57.1208 51.0439 56.9199C51.1129 56.8404 51.1788 56.7555 51.2411 56.6657C51.3361 56.529 51.423 56.381 51.5006 56.2232C51.5398 56.1436 51.5766 56.0616 51.6109 55.9773C51.7026 55.7522 51.7765 55.5109 51.8302 55.2571C51.8955 54.9477 51.9306 54.6198 51.9306 54.2804V49.5746ZM38.7526 57.6806V56.1806H29.0552V57.6806H38.7526ZM23.1254 57.6806V56.1806H13.428V57.6806H23.1254ZM7.4981 57.6806V56.1806H2.6494C2.61462 56.1806 2.56298 56.1726 2.4866 56.1268L2.0065 55.839L1.81807 54.947C1.77448 54.7407 1.75 54.5168 1.75 54.2804V49.5746H0.25V54.2804C0.25 54.6198 0.285108 54.9477 0.350459 55.2571C0.404076 55.5109 0.478051 55.7522 0.569699 55.9773C0.604027 56.0616 0.640834 56.1436 0.67998 56.2232C0.757646 56.381 0.844516 56.529 0.939487 56.6657C1.00185 56.7555 1.06771 56.8404 1.13674 56.9199C1.31102 57.1208 1.50558 57.2876 1.71538 57.4134C2.00246 57.5855 2.31809 57.6806 2.6494 57.6806H7.4981ZM0.25 44.026H1.75V34.6146H0.25V44.026ZM0.25 29.066H1.75V19.6546H0.25V29.066Z", fill: "#DDDDDD" })), _circle || (_circle = /*#__PURE__*/React.createElement("circle", { cx: 54.3187, cy: 22.5518, r: 9.93103, fill: "#FFBE21" })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M53.6184 21.8517V18.1379H55.0184V21.8517L58.7329 21.8517V23.2517H55.0184V26.9655H53.6184V23.2517H49.9053V21.8517L53.6184 21.8517Z", fill: "white" }))); }; var ForwardRef = /*#__PURE__*/forwardRef(SvgBrandingStageNew); export { ForwardRef as ReactComponent }; export default __webpack_public_path__ + "branding-stage-new.f77f1f0c910547398a446dc50adc0718.svg";

#### Scenario 3: Simple @svgr/webpack setup
- Webpack config:

config.module.rules.unshift({
    test: /\.svg$/i,
    issuer: /\.[jt]sx?$/,
    use: ['@svgr/webpack'],
});

This is what the svgr docs mention ([link](https://react-svgr.com/docs/webpack/)) for a simple setup. From my understanding, the default webpack config also uses svgr/webpack under the hood but I guess the setup must be slightly different.

- SVGs don't render and the app throws the following error for *all* SVGs: `Non-whitespace before first tag.`

#### Senario 4: Andvanced @svgr/webpack setup
- Webpack config:

config.module.rules.unshift(
    {
        test: /\.svg$/i,
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
    },
    {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
        use: ['@svgr/webpack'],
    }
);

This is what the svgr docs mention ([link](https://react-svgr.com/docs/webpack/)) for a setup where you want to use both SVGR and asset SVG in your app.

- SVGs don't render and the app throws the following error for *all* SVGs: `Non-whitespace before first tag.`