Merge pull request #46 from douglashall/douglashall/fix_logo

fix(header): fix edX logo in header

config/webpack.dev.config.js

@@ -64,6 +64,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // Specify additional processing or side-effects done on the Webpack output bundles as a whole.

config/webpack.prod.config.js

@@ -70,6 +70,28 @@ module.exports = Merge.smart(commonConfig, {
         test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          'file-loader',
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              optimizationlevel: 7,
+              mozjpeg: {
+                progressive: true,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              pngquant: {
+                quality: '65-90',
+                speed: 4,
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   // New in Webpack 4. Replaces CommonChunksPlugin. Extract common modules among all chunks to one

package.json

@@ -69,6 +69,7 @@
     "html-webpack-plugin": "^3.0.3",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
+    "image-webpack-loader": "^4.2.0",
     "jest": "^22.4.0",
     "node-sass": "^4.7.2",
     "react-dev-utils": "^5.0.0",

src/components/Header/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Hyperlink } from '@edx/paragon';
 
+import EdxLogo from '../../../assets/edx-sm.png';
+
 export default class Header extends React.Component {
   constructor(props) {
     super(props);
@@ -9,11 +11,17 @@ export default class Header extends React.Component {
     };
   }
 
+  renderLogo() {
+    return (
+      <img src={EdxLogo} alt="edX logo" height="30" width="60" />
+    );
+  }
+
   render() {
     return (
       <div className="mb-3">
         <header className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
-          <Hyperlink content={<img src="./assets/edx-sm.png" alt="The edX logo" height="30" width="60" />} destination="https://www.edx.org" />
+          <Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
           <div />
         </header>
       </div>