导出 react 时如何使用 Glyphicons-bootstrap

Question

我有 2 个项目：Project1 和 Project2。

Project1 使用 react-bootstrap。 Project1 使用了 react-bootstrap 的所有组件，并在 react-bootstrap 组件上创建了一个包装器（不要问为什么，这是一个要求）。 Project2 应该使用 Project1（导出时）作为 react-bootstrap.

的包装库

项目 1 -->

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

现在问题开始于 Glyphicons。

项目2-->

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>

我使用 webpack-dev-server 在浏览器中构建 Project2 和运行。当我在 Project2 中使用 Glyphicon.jsx 时，图标不会显示在浏览器中。这是 Chrome 浏览器控制台中显示的错误：

Chrome Browser Debug Console errors

现在我知道问题与字体有关。

Even if I copy these generated font files and paste in root of Project2, I still get same errors.

我应该如何从 Project1 中导出这些字体文件，以便它们可以在 Project2 中使用？

Answer 1

无需深入了解项目的细节。我将向您介绍如何让 Bootstrap Glypicons 显示在您的 React 应用程序上。

1- 安装包

npm install react-bootstrap --save-dev

2- 在您想要字形图标的所需文件中：

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

3-现在写，这里我以'search'图标为例：

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

4- 当你检查你的 html 时，这个 will/should 是编译输出：

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

5- 最后。这就是让我的图标真正显示在浏览器上的原因：

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

当然，我假设您已经 bootstrap 连接到项目的其余部分。我只处理 Glyphicon 问题。因此，完成后，终止并重新启动您的 webpack 以查看反映的更改。

Answer 2

Bootstrap 4 不支持字形图标，用户 bootstrap 3 或使用 awesome 字体。

bootstrap doc

导出 react 时如何使用 Glyphicons-bootstrap

How to use Glyphicons when exporting react-bootstrap

fonts

glyphicons

webpack

react-bootstrap

webpack-dev-server