Невозможно использовать Font Awsome в проекте ReactJs - PullRequest
Новая
       10

Невозможно использовать Font Awsome в проекте ReactJs

0 голосов
/ 23 февраля 2019

Я установил Font Awesome, но я все еще не могу использовать его с Boostrap в моем проекте ReactJs.

Я предпринял следующие шаги для его установки:

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>

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Я наконец нашел решение , которое работает для меня.Я исправил несколько вещей.

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
        }
      }
    }
  ]
},
THING TO CHANGE

Добавьте эти загрузчики: 

{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-части я сделал это исправление:

Поскольку в новой версии (5) шрифта awesome используется "fas" или "fab" вместо префикса "fa", я заметил, что я уже использую "fas"вместо "fa", поэтому я снова переключился на "fa", и он отлично работает.

Эти шаги помогли мне начать использовать Font Awesome в проекте ReactJs.

0 голосов
/ 23 февраля 2019

Вы настроили свой веб-пакет для анализа svgs со следующим регулярным выражением /\.(png|jpg|gif|woff|woff2|eot|ttf|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"
 },
...