Switches from webpack image loader to inlining with babel

Author: alexgorbatchev

package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.2",
+    "babel-plugin-static-fs": "^1.1.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-react-hmre": "^1.1.1",

src/components/BannerComponent.tsx

@@ -1,5 +1,14 @@
 import * as Radium from 'radium';
 import * as React from 'react';
+import { readFileSync } from 'fs';
+
+const toDataURI = (mediaType: string, value: Buffer): string =>
+  `data:${mediaType};base64,${value.toString('base64')}`;
+
+const svg = (value: Buffer): string =>
+  toDataURI('image/svg+xml', value);
+
+const TWITTER_SVG = svg(readFileSync(`${__dirname}/twitter.svg`));
 
 export enum BannerKind {
   primary,
@@ -33,7 +42,7 @@ export default class BannerComponent extends React.Component<BannerProps, any> {
   render() {
     return (
       <div ref="root" style={[styles.base, styles[this.props.kind]]}>
-        <img ref="logo" src={require('./twitter.svg') } width="20" />
+        <img ref="logo" src={TWITTER_SVG} width="20" />
       </div>
     );
   }

webpack/config-base.ts

@@ -56,7 +56,7 @@ const babel = {
   include: BUILD_SRC_DIR,
   query: {
     presets: ['es2015'],
-    plugins: [],
+    plugins: <string | any>['static-fs'],
   }
 };