Remove use of webpack loaders in components (#8249)

Various SVGs were being imported directly in components using Webpack
loaders. This was done to get these components to work correctly in
storybook, which uses Webpack. However we don't use Webpack for our
actual build system, so these components would fail when you attempted
to use them.

Instead the storybook script has been updated to use the `--static-dir`
flag, which allows specifying a directory of files to serve statically.
The `app` directory is served statically, so all of the relative URLs
we use in practice to reference fonts and images should just work.

The storybook build command has been updated to use the same flag.
Unfortunately this also means that the uncompiled background code is
now included in the build as well, because it's alongside our static
files. This shouldn't have any impact upon the build though.

The use of this `static-dir` option as made much of the existing
storybook Webpack configuration unnecessary, so it has been reduced to
just the essential steps.

.storybook/webpack.config.js

@@ -4,21 +4,17 @@ module.exports = {
   module: {
     strictExportPresence: true,
     rules: [
-      {
-        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
-        loaders: [{
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: 'fonts/',
-          },
-        }],
-      },
       {
         test: /\.scss$/,
         loaders: [
           'style-loader',
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              import: false,
+              url: false,
+            },
+          },
           'resolve-url-loader',
           {
             loader: 'sass-loader',
@@ -28,22 +24,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-            },
-          }
-        ],
-      },
     ],
   },
-  resolve: {
-    alias: {
-      './fonts/Font_Awesome': path.resolve(__dirname, '../app/fonts/Font_Awesome'),
-    },
-  },
 }

package.json

@@ -52,8 +52,8 @@
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
-    "storybook": "start-storybook -p 6006 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o .out",
+    "storybook": "start-storybook -p 6006 -c .storybook --static-dir ./app",
+    "storybook:build": "build-storybook -c .storybook -o .out --static-dir ./app",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir .out --remote storybook --branch master",
     "update-changelog": "./development/auto-changelog.sh",
     "generate:migration": "./development/generate-migration.sh"

ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js

@@ -2,17 +2,14 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import CircleIcon from '../circle-icon'
 
-import danger from '../../../../../app/images/icons/red-triangle-exclaim.svg'
-import warning from '../../../../../app/images/icons/yellow-bell.svg'
-
 const typeConfig = {
   danger: {
     circleClass: 'alert-circle-icon--danger',
-    iconSource: danger,
+    iconSource: 'images/icons/red-triangle-exclaim.svg',
   },
   warning: {
     circleClass: 'alert-circle-icon--warning',
-    iconSource: warning,
+    iconSource: 'images/icons/yellow-bell.svg',
   },
 }
 

ui/app/components/ui/circle-icon/circle-icon.stories.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import CircleIcon from './circle-icon.component'
-import img from '../../../../../app/images/eth_logo.svg'
 
 export default {
   title: 'CircleIcon',
@@ -12,6 +11,6 @@ export const basicCircleIcon = () => (
     borderColor="black"
     background="white"
     iconSize="42px"
-    iconSource={img}
+    iconSource="images/eth_logo.svg"
   />
 )