title: How to use Glyphicons when exporting react-bootstrap
body: <p>I have 2 projects: <strong>Project1</strong> and <strong>Project2</strong>.</p>
  
  <p><strong>Project1</strong> uses <strong>react-bootstrap</strong>. <strong>Project1</strong> uses all the components of react-bootstrap and create a wrapper over react-bootstrap components(Don't ask why, it is a requirement). <strong>Project2</strong> is supposed to use <strong>Project1</strong> (when exported) as a wrapper library for react-bootstrap.</p>
  
  <p><strong>Project1</strong> --></p>
  
  <p><em>index.js:</em></p>
  
  <pre><code>import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
  ...
  import Glyphicon from './src/components/Glyphicon';
  ...
  export default {
  ...
  Glyphicon,
  ...
  };
  </code></pre>
  
  <p><em>src/components/Glyphicon.jsx:</em></p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { RBGlyphicon } from 'react-bootstrap';
  
  const Glyphicon = props =&gt; (
    &lt;RBGlyphicon
      id={props.id}
      bsClass={props.clClass}
      glyph={props.glyph}
    /&gt;
  );
  
  Glyphicon.defaultProps = {
    id: undefined,
    clClass: 'glyphicon',
    glyph: undefined,
  };
  
  Glyphicon.propTypes = {
    id: PropTypes.string,
    clClass: PropTypes.string,
    glyph: PropTypes.string.isRequired,
  };
  
  export default Glyphicon;
  </code></pre>
  
  <p><em>webpack.config.js:</em></p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  
      module.exports = (env = {}) =&gt; {
        const isProduction = env.production === true;
        return {
          entry: './index.js',
          output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'Project1.js',
            libraryTarget: 'umd',
            library: 'Project1',
          },
          module: {
            rules: [
              {
                test: /.(js|jsx)?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
              },
              {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
              },
              {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&amp;mimetype=application/font-woff',
              },
              {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&amp;mimetype=application/octet-stream',
              },
              {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
              },
              {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&amp;mimetype=image/svg+xml',
              },
            ],
          },
          resolve: {
            extensions: ['.js', '.jsx'],
          },
          plugins: [
            new webpack.DefinePlugin({
              'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            }),
            new webpack.optimize.UglifyJsPlugin(),
          ],
        };
      };
  </code></pre>
  
  <blockquote>
    <p>I export this <strong>Project1</strong> as a bundle called Project1 using <strong>webpack</strong> and copy it in <strong>Project2</strong> in <em>src</em> folder. I don't copy the font files generated in this build</p>
  </blockquote>
  
  <p>Now the problem starts with <a href="https://react-bootstrap.github.io/components.html#glyphicons" rel="nofollow noreferrer">Glyphicons</a>.</p>
  
  <p><strong>Project2</strong>--></p>
  
  <p><em>src/App.jsx:</em></p>
  
  <pre><code>import React, { Component } from 'react';
  import Project1 from './Project1';
  ...
  export default class App extends Component {
    render() {
      return (
        &lt;div&gt;
  ...
  &lt;Project1.Glyphicon glyph="camera" /&gt;Camera
  ...
  &lt;/div&gt;
  );
  }
  }
  export default App;
  </code></pre>
  
  <p><em>index.js:</em></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './src/App';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><em>index.html:</em></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="root"&gt;
      &lt;/div&gt;
      &lt;script src='/bundle.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I use <em>webpack-dev-server</em> to build <strong>Project2</strong> and run in the browser. When I use <em>Glyphicon.jsx</em> in <strong>Project2</strong>, the icons don't show up in browser. Here is the errors which show up in Chrome Browser console:</p>
  
  <p><a href="https://i.stack.imgur.com/PGlAn.png" rel="nofollow noreferrer">Chrome Browser Debug Console errors</a></p>
  
  <p>Now I am aware that the problem is related to fonts.</p>
  
  <blockquote>
    <p>Even if I copy these generated font files and paste in root of <strong>Project2</strong>, I still get same errors.</p>
  </blockquote>
  
  <p>What should I do to export these font files from <strong>Project1</strong> so that they can be used in <strong>Project2</strong>?</p>