How to use Glyphicons when exporting react-bootstrap
I have 2 projects: Project1 and Project2.
Project1 uses react-bootstrap. Project1 uses all the components of react-bootstrap and create a wrapper over react-bootstrap components(Don't ask why, it is a requirement). Project2 is supposed to use Project1 (when exported) as a wrapper library for react-bootstrap.
Project1 -->
index.js:
import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};
src/components/Glyphicon.jsx:
import React, { PropTypes } from 'react';
import { RBGlyphicon } from 'react-bootstrap';
const Glyphicon = props => (
<RBGlyphicon
id={props.id}
bsClass={props.clClass}
glyph={props.glyph}
/>
);
Glyphicon.defaultProps = {
id: undefined,
clClass: 'glyphicon',
glyph: undefined,
};
Glyphicon.propTypes = {
id: PropTypes.string,
clClass: PropTypes.string,
glyph: PropTypes.string.isRequired,
};
export default Glyphicon;
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
module.exports = (env = {}) => {
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&mimetype=application/font-woff',
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&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(),
],
};
};
I export this Project1 as a bundle called Project1 using webpack and copy it in Project2 in src folder. I don't copy the font files generated in this build
Now the problem starts with Glyphicons.
Project2-->
src/App.jsx:
import React, { Component } from 'react';
import Project1 from './Project1';
...
export default class App extends Component {
render() {
return (
<div>
...
<Project1.Glyphicon glyph="camera" />Camera
...
</div>
);
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';
ReactDOM.render(<App />, document.getElementById('root'));
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="root">
</div>
<script src='/bundle.js'></script>
</body>
</html>
I use webpack-dev-server to build Project2 and run in the browser. When I use Glyphicon.jsx in Project2, the icons don't show up in browser. Here is the errors which show up in Chrome Browser console:
Chrome Browser Debug Console errors
Now I am aware that the problem is related to fonts.
Even if I copy these generated font files and paste in root of Project2, I still get same errors.
What should I do to export these font files from Project1 so that they can be used in Project2?
Answer
Bootstrap 4 is not supporting the glyph icons, either user bootstrap 3 or use font awesome.