在 ReactJS 组件中使用 FontAwesome

Question

我正在尝试在 ReactJS 功能组件中使用 FontAwesome。 React 组件使用 FontAwesome 图标，例如 <i class="fas fa-download"></i>:

import React, { useCallback, useState, useRef } from "react";

export default function Daw() {
  return (
    <>
        <div class="btn-group">
                <button type="button" title="Download" class="btn btn-download btn-outline-primary">
                    <i class="fas fa-download"></i>
                </button>
        </div>
    </>
  );
}

我已经安装了 FontAwesome：

npm install --save @fortawesome/fontawesome-free

导入

当我这样导入时：

import '@fortawesome/fontawesome-free/css/all.min.css'
import '@fortawesome/fontawesome-free/css/v5-font-face.min.css'

我收到这些错误：

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2 net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf net::ERR_ABORTED 404 (Not Found)

尝试过

我研究过这个post:

https://fontawesome.com/docs/web/setup/host-yourself/webfonts

我无法弄清楚为什么我的导入没有工作。为什么找不到字体？它们与 @fortawesome/fontawesome-free 一起安装。那么，怎么了？

Answer 1

可能需要很多 CSS 和 JS 库。

安装包：

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';

希望对您有所帮助。

Answer 2

最终，next/script 包来拯救了。像这样实现：

import React, { useCallback, useState, useRef } from "react";

import Script from "next/script"; // ** This one solved the problem :)

export default function Daw() {
  return (
    <>
        <Script
            src="https://kit.fontawesome.com/xx88888888.js"
            crossorigin="anonymous"
        />

        <div class="btn-group">
                <button type="button" title="Download" class="btn btn-download btn-outline-primary">
                    <i class="fas fa-download"></i>
                </button>
        </div>
    </>
  );
}

在 ReactJS 组件中使用 FontAwesome

Using FontAwesome inside a ReactJS component

javascript

css

font-awesome

reactjs

导入

尝试过