无法在 ReactJs 项目中使用 Font Awsome

Question

我已经安装了 Font Awesome，但我仍然无法在我的 ReactJs 项目中将它与 Boostrap 一起使用。

我采取了以下步骤来安装它：

npm install --save font-awesome

然后我将它导入到我的 index.js 文件中，例如：

import 'font-awesome/css/font-awesome.min.css';

Webpack.config.js 看起来像这样：

module: {
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader", 
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.svg$/,
                use: [
                  "babel-loader",
                  {
                    loader: "react-svg-loader",
                    options: {
                      svgo: {
                        plugins: [
                          { removeTitle: false }
                        ],
                        floatPrecision: 2
                      }
                    }
                  }
                ]
            },
            {
                test: /\.(scss|sass)$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },

            { 
                test: /\.css$/, 
                loader: 'style-loader!css-loader' 
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                loader: "url-loader",
                query: { mimetype: "image/png" }
            },

            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
              }, {
                test: /\.mp4$/,
                loader: 'url-loader?limit=10000&mimetype=video/mp4'
            }

        ]

    }

Package.json

"dependencies": {
"font-awesome": "^4.7.0"
...}

当我尝试这样使用它时

<i className="fas fa-user"></i>

这是不可能的，因为当我运行 npm start 时，我的终端上出现以下错误：

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module build failed: 
 @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 7:707-758
 @ ./node_modules/font-awesome/css/font-awesome.min.css
 @ ./src/app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/app/index.js

我已经在网上阅读了一些解决方案，并尝试了一个安装 Font Awesome 的解决方案，例如：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

进口：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

用途：

<FontAwesomeIcon icon={ faThumbsUp }/>

这可行，但我怎样才能让它像使用 Boostrap 和这行代码一样正常工作：

<i className="fas fa-user"></i>

Answer 1

您已将 webpack 配置为使用以下正则表达式 /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/ 解析 svg，这意味着将不会解析包含 svg 之后的任何内容的文件。如果您查看错误，文件显示为./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0，这肯定与您的正则表达式不匹配

将正则表达式更改为/.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[\=\.a-z0-9]+)?$/，它应该可以工作

 {
      test: /.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[\=\.a-z0-9]+)?$/,
      loader: "url-loader"
 },

Answer 2

我终于找到了适合我的解决方案。我纠正了一些事情。

1. webpack.config.js

我在 webpack.config 中做了一些更改，我已经更改了这两件事。

1.改变的地方

旧的不工作示例：

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

新的工作示例：

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "url-loader",
      options: {
        prefix: "font",
        limit: 10000,
        mimetype: "application/octet-stream",
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

1. 要改变的事情

添加这个加载器：

{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /\.woff(2)?(\?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" }

在我对 webpack.config.js 进行更改后，我的终端中没有任何错误，但图标仍然显示为带边框的方形框。 所以在我的html部分我做了这个修复：

作为 font awesome 的新版本 (5) 使用 "fas" 或 "fab" 而不是 "fa" 前缀我注意到我已经在使用 "fas" 而不是 "fa" 所以我再次切换到 "fa"而且效果很好。

这些步骤帮助我开始在 ReactJs 项目中使用 Font Awesome。