added story for DefaultIconReact

packages/ui-components/.storybook/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const SRC_PATH = path.join(__dirname, '../src');
 const STORIES_PATH = path.join(__dirname, '../stories');
+const STYLE_PATH = path.resolve(__dirname, '../style');
 
 //dont need stories path if you have your stories inside your src folder
 module.exports = ({ config }) => {
@@ -17,6 +18,19 @@ module.exports = ({ config }) => {
       { loader: require.resolve('react-docgen-typescript-loader') }
     ]
   });
+
+  const fileLoaderRule = config.module.rules.find(rule =>
+    rule.test.test('.svg')
+  );
+  fileLoaderRule.exclude = STYLE_PATH;
+  config.module.rules.push({
+    test: /\.svg$/,
+    include: STYLE_PATH,
+    // issuer: { test: /\.ts$/ },
+    use: {
+      loader: 'raw-loader'
+    }
+  });
   config.resolve.extensions.push('.ts', '.tsx');
   return config;
 };

packages/ui-components/stories/iconreact.stories.tsx

@@ -0,0 +1,24 @@
+/**
+ * Example story for styling an icon.
+ */
+// need this to avoid
+// TS2686: 'React' refers to a UMD global, but the current file is a module.
+import React from 'react';
+
+import { DefaultIconReact } from '../src';
+
+import '@jupyterlab/application/style/index.css';
+import '@jupyterlab/theme-light-extension/style/index.css';
+
+export default {
+  component: DefaultIconReact,
+  title: 'IconReact'
+};
+
+export const buildIcon = () => <DefaultIconReact name={'build'} />;
+
+export const html5Icon = () => (
+  <div className={'foobar'}>
+    <DefaultIconReact name={'html5'} kind={'launcherSection'} center={true} />
+  </div>
+);