Update method for handling SVGs via webpack

[g-elwell]

Description

Fixes #34. This PR updates the way that SVGs are processed via Webpack, following the methods outlined in the SVGR documentation related to handling both SVG and SVGR components in the same project.

With this change, SVGs are processed differently depending on whether you include ?url as a resourceQuery on the end of your import file path.

If ?url is present, the SVG will be processed as an asset (file or dataURI depending on file size), otherwise it will run through SVGR and be converted into a React component.

The previous method could handle both import types, but there are a few benefits in making this change:

• babel-loader is not required when using @svgr/webpack (source)
• url-loader is being deprecated in favour of asset modules (source)
• The syntax for importing SVGs into React components is simplified
• The amount of processing for each SVG import is minimised

This PR introduces a breaking change as existing SVG imports would need to be updated from:

import mySvg from './images/my-svg.svg'; // import as a URL
import { ReactComponent as MySvg } from './images/my-svg.svg'; // import as React component

to:

import mySvg from './images/my-svg.svg?url'; // import as a URL
import MySvg from './images/my-svg.svg'; // import as React component

How has this been tested?

• SVGs imported as assets work as expected
• SVGs imported as React components work as expected

[ampersarnie]

I've added in an example of how this works under the example-site. This is also used for an integration test to ensure we're accidentally introducing breaking changes.