Merge pull request #475 from hackforla/dev

Dev to master
hackforla · Mar 27, 2020 · cf473b8 · cf473b8
2 parents 8bb225a + 570b59d
commit cf473b8
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 10 deletions.
diff --git a/package.json b/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",

diff --git a/src/App.jsx b/src/App.jsx
@@ -18,7 +18,7 @@ const App = () => {
 
   return (
     <Router
-      baseURL={process.env.BASE_URL || '/'}
+      basename={process.env.BASE_URL || '/'}
     >
       <Header />
       <Routes />

diff --git a/src/assets/dataserver.svg → src/assets/aboutdataserver.svg b/src/assets/dataserver.svg → src/assets/aboutdataserver.svg
diff --git a/src/assets/datavisualization.svg → src/assets/aboutdatavis.svg b/src/assets/datavisualization.svg → src/assets/aboutdatavis.svg
diff --git a/src/assets/growth.svg → src/assets/aboutgrowth.svg b/src/assets/growth.svg → src/assets/aboutgrowth.svg
diff --git a/src/assets/mobile.svg → src/assets/aboutmobile.svg b/src/assets/mobile.svg → src/assets/aboutmobile.svg
diff --git a/src/components/about/HowItWorks.jsx b/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

diff --git a/webpack.config.js b/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: [