Add logo

Author: markdalgleish

package.json

@@ -21,16 +21,18 @@
     "autoprefixer-core": "^5.1.11",
     "babel-core": "^5.2.17",
     "babel-loader": "^5.0.0",
-    "css-loader": "^0.14.3",
+    "css-loader": "^0.14.4",
     "ejs": "^2.3.1",
     "extract-text-webpack-plugin": "^0.8.1",
+    "file-loader": "^0.8.4",
     "node-libs-browser": "^0.5.0",
     "postcss-color-rebeccapurple": "^1.1.0",
     "postcss-loader": "^0.4.3",
     "react": "^0.13.3",
     "react-to-html-webpack-plugin": "^2.1.0",
-    "style-loader": "^0.12.2",
+    "style-loader": "^0.12.3",
+    "url-loader": "^0.5.6",
     "webpack": "^1.9.10",
-    "webpack-dev-server": "^1.8.2"
+    "webpack-dev-server": "^1.9.0"
   }
 }

src/components/App.css

@@ -0,0 +1,4 @@
+.app {
+  font-family: helvetica, arial, sans-serif;
+  padding: 6px 20px 30px;
+}

src/components/App.js

@@ -1,5 +1,8 @@
+import styles from './App.css';
+
 import React, { Component } from 'react';
 
+import Logo from './Logo/Logo';
 import ScopedSelectors from './ScopedSelectors/ScopedSelectors';
 import GlobalSelectors from './GlobalSelectors/GlobalSelectors';
 import ClassInheritance from './ClassInheritance/ClassInheritance';
@@ -10,7 +13,8 @@ export default class App extends Component {
 
   render() {
     return (
-      <div>
+      <div className={styles.app}>
+        <Logo />
         <h1>CSS Modules Webpack Demo</h1>
 
         <h2>Scoped Selectors</h2>

src/components/Logo/Logo.css

@@ -0,0 +1,6 @@
+.logo {
+  background: url('./logo.svg');
+  background-size: 200px 200px;
+  width: 200px;
+  height: 200px;
+}

src/components/Logo/Logo.js

@@ -0,0 +1,11 @@
+import styles from './Logo.css';
+
+import React, { Component } from 'react';
+
+export default class Logo extends Component {
+
+  render() {
+    return <div className={styles.logo} />;
+  }
+
+};

src/components/Logo/logo.svg

@@ -18,7 +18,8 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }
+      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?module&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
+      { test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
     ]
   },