CODEWITHSUNDEEP
fontswebpackwebpack-dev-serverglyphiconsreact-bootstrap
user5159993
user5159993

Reputation:

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?

Upvotes: 5

Views: 18794

Answers (2)

Jose G Varanam
Jose G Varanam

Reputation: 767

Bootstrap 4 is not supporting the glyph icons, either user bootstrap 3 or use font awesome.

bootstrap doc

Upvotes: 8

Jonca33
Jonca33

Reputation: 3493

Without going too deep into the details of your project. I'll walk you on how to get Bootstrap Glypicons to show on your React app.

1- Install package

npm install react-bootstrap --save-dev

2- In the desired file where you want your glyphicon: 

import Glyphicon from 'react-bootstrap/lib/Glyphicon'

3- Now write, here I use 'search' icon as an example:

 <span>
    <Glyphicon glyph="search"/>
 </span>

4- when you inspect your html, this will/should be the compiled output:

<span class="glyphicon glyphicon-search"></span>

5- Finally. THIS is what made my icons to actually display on the browser:

   In your css file apply the CDN:
   /* Glyphicons*/
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Naturally, I assume you already have bootstrap wired to the rest of your project. I'm addressing only the Glyphicon matter. So after you're done, kill and restart your webpack to see the changes reflected.

Upvotes: 3

Related Questions