Getting icon loading in the root styles working

package.json

@@ -34,6 +34,7 @@
     "style-loader": "^0.20.1",
     "svg-react-loader": "^0.4.5",
     "uglifyjs-webpack-plugin": "^1.1.8",
+    "url-loader": "^0.6.2",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.11.1",
     "webpack-merge": "^4.1.1",

src/pages/404.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import '../style.css';
 
 import Message from '../components/Message';
-import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import ErrorIcon from '!svg-react-loader!feather-icons/dist/icons/alert-octagon.svg';
 
 ReactDOM.render(
   <Message icon={ ErrorIcon } heading="404 Page Not Found">

src/style.css

@@ -25,7 +25,7 @@ body {
   font-size: 1.6rem;
 }
 
-:global(#main) {
+#main {
   background: var(--color-green) linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
   box-shadow: 0 0 1rem var(--color-black);
   padding: 0 var(--content-margin);
@@ -33,7 +33,7 @@ body {
   position: relative;
 }
 
-:global(#main) h1 {
+#main h1 {
   font-family: 'Bangers', 'cursive';
   font-size: 4rem;
   font-weight: normal;
@@ -42,20 +42,20 @@ body {
   line-height: var(--header-height);
 }
 
-:global(#main) a {
+#main a {
   text-decoration: none;
   display: inline-block;
 }
 
-:global(#main) ul {
+#main ul {
   line-height: var(--header-height);
   position: absolute;
   top: 0;
   right: var(--content-margin);
 }
 
-:global(#main) li a:hover,
+#main li a:hover,
-:global(#main) li a:active {
+#main li a:active {
   text-decoration: underline;
 }
 
@@ -84,15 +84,28 @@ li {
   display: inline-block;
 }
 
-:global(.inline-list) li {
+.inline-list li {
   white-space: nowrap;
 }
 
-:global(.inline-list) li:after {
+.inline-list li:after {
   content: '//';
   padding: 0 0.5rem;
 }
 
-:global(.inline-list) li:last-child:after {
+.inline-list li:last-child:after {
   content: '';
 }
+
+[icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-size: 1em 1em;
+  margin-right: 0.5rem;
+  vertical-align: text-top;
+}
+
+[icon="github"] {
+  background-image: url('~feather-icons/dist/icons/github.svg');
+}

src/template.html

@@ -17,7 +17,7 @@
 
       <ul>
         <li><a href="https://github.com/javallone/regexper-static">
-          Source on GitHub
+          <i icon="github"></i>Source on GitHub
         </a></li>
       </ul>
     </header>

webpack.common.js

@@ -79,31 +79,58 @@ module.exports = {
         loader: 'babel-loader'
       },
       {
-        test: /\.css$/,
+        oneOf: [
-        use: ExtractTextPlugin.extract({
+          {
-          fallback: 'style-loader',
+            test: /\.css$/,
-          use: [
+            exclude: /components/,
-            {
+            use: ExtractTextPlugin.extract({
-              loader: 'css-loader',
+              fallback: 'style-loader',
-              options: {
+              use: [
-                importLoaders: 1,
+                {
-                minimize: true,
+                  loader: 'css-loader',
-                sourceMap: true,
+                  options: {
-                modules: true
+                    importLoaders: 1,
-              }
+                    minimize: true,
-            },
+                    sourceMap: true,
-            {
+                  }
-              loader: 'postcss-loader',
+                },
-              options: {
+                {
-                ident: 'postcss'
+                  loader: 'postcss-loader',
-              }
+                  options: {
-            }
+                    ident: 'postcss'
-          ]
+                  }
-        })
+                }
+              ]
+            })
+          },
+          {
+            test: /\.css$/,
+            use: ExtractTextPlugin.extract({
+              fallback: 'style-loader',
+              use: [
+                {
+                  loader: 'css-loader',
+                  options: {
+                    importLoaders: 1,
+                    minimize: true,
+                    sourceMap: true,
+                    modules: true
+                  }
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    ident: 'postcss'
+                  }
+                }
+              ]
+            })
+          },
+        ]
       },
       {
         test: /\.svg$/,
-        loader: 'svg-react-loader'
+        loader: 'url-loader'
       }
     ]
   }

yarn.lock

@@ -6547,6 +6547,14 @@ url-join@^2.0.2:
   version "2.0.5"
   resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
 
+url-loader@^0.6.2:
+  version "0.6.2"
+  resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
+
 url-parse@1.0.x:
   version "1.0.5"
   resolved "http://nexus.home.bromidic.net:8081/repository/npm-all/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"