SVG webpack fix

package.json

@@ -76,6 +76,7 @@
     "file-loader": "^4.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.12.0",
+    "react-svg-loader": "^3.0.3",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "webpack": "^4.41.2",

src/components/about/HowItWorks.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import mobile from '@assets/mobile.svg';
-import dataserver from '@assets/dataserver.svg';
-import growth from '@assets/growth.svg';
-import datavisualization from '@assets/datavisualization.svg';
+// React-svg-loader for Webpack bundles SVGs and makes them available as
+// React components which simply return the imported SVG paths.
+import MobileSVG from '@assets/aboutmobile.svg';
+import DataServerSVG from '@assets/aboutdataserver.svg';
+import GrowthSVG from '@assets/aboutgrowth.svg';
+import DataVizSVG from '@assets/aboutdatavis.svg';
 
 const HowItWorks = () => (
   <div className="how-it-works">
     <h1>How It Works</h1>
     <div className="grid-container">
-      <img src={mobile} alt="" />
-      <img src={dataserver} alt="" />
-      <img src={datavisualization} alt="" />
-      <img src={growth} alt="" />
+      <MobileSVG />
+      <DataServerSVG />
+      <GrowthSVG />
+      <DataVizSVG />
       <p>Community members post reports via the City&apos;s easy-to-use mobile application.</p>
       <p>
         Reports are consolidated and entered into a central database and requests are

webpack.config.js

@@ -49,11 +49,25 @@ module.exports = {
         ],
       },
       {
-        test: /\.(png|svg|jpg|gif)$/,
+        test: /\.(png|jpg|gif)$/,
         use: [
           'file-loader',
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: 'react-svg-loader',
+            options: {
+              jsx: true,
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [