如何将Font Awesome添加到Next.js 13项目错误模块未找到

rjjhvcjd 于 2023-06-05 发布在其他

关注(0)|答案(3)|浏览(153)

我想添加fontawesome到我的nextjs 13项目。我正在尝试实施解决方案#3，这是很久以前提出的。我也在fontawesome文档中尝试过这个解决方案。我刚开始使用nextjs，一开始我遵循文档，但产生了Module not found错误。然后，我尝试修改这些解决方案，以适应版本13中的新更改。作为参考，我的项目使用/src/app/pages.tsx文件结构。我尝试添加/src/app/_app.tsx，内容如下：

import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false;
library.add(fas);

在我的/src/app/page.tsx中，我添加了import并尝试使用fontawesome：

import Image from 'next/image'
import Link from "next/link";
import cardStyles from './styles/card.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <FontAwesomeIcon icon={['fab', 'linkedin']} />LinkedIn
    </main>
  )
}

我总是得到同样的错误：

./src/app/page.tsx:4:0
Module not found: Can't resolve '@fortawesome/react-fontawesome'
  2 | import Link from "next/link";
  3 | import cardStyles from './styles/card.module.css'
> 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  5 | 
  6 | 
  7 | export default function Home() {

我在package.json中有这个包，并安装在node_modules中：

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",

我甚至重新安装了它以确保。我不知道如何解决此错误。这可能是因为pages.tsx是SSR而不是在客户端完成的吗？

next.js

来源：https://stackoverflow.com/questions/76352403/how-to-add-font-awesome-to-next-js-13-project-error-module-not-found

3条答案

按热度按时间

aelbi1ox1#

单位：RootLayout

import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

然后在Home页

import Image from "next/image";
import styles from "./page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faCheck}
        className="fas fa-check"
        style={{ color: "red", fontSize: 64 }}
      />
      Check
    </main>
  );
}

工作证明：

@fortawesome/free-solid-svg-icons中不存在Linkedin图标。使用LinkedIn

npm i @fortawesome/free-brands-svg-icons

然后在主页

import { faLinkedin } from "@fortawesome/free-brands-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faLinkedin}
        style={{ color: "blue", fontSize: 64 }}
      />
      Linkedin
    </main>
  );
}