英文:
How to add Font Awesome to Next.js 13 project error Module not found
问题
我想将Font Awesome添加到我的Next.js 13项目中。我尝试实现解决方案＃3，这是很久以前提出的问题。我还尝试了FontAwesome文档中的解决方案。我刚刚开始使用Next.js，一开始我按照文档的步骤进行操作，但出现了“模块未找到”的错误。然后我尝试修改这些解决方案，使其适应版本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”中，我添加了导入并尝试使用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而不是在客户端上执行？
英文:
I would like to add fontawesome to my nextjs 13 project. I'm trying to implement solution #3 which was asked a long time ago. I've tried the solution in the fontawesome documentation as well. I'm just starting out with nextjs and at first I followed the documentation, but that produced a Module not found error. Then I tried to modify these solutions to work with the new changes in version 13. For reference my project is using the /src/app/pages.tsx file structure. I tried adding /src/app/_app.tsx with the following content:
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);
In my /src/app/page.tsx I added the import and tried to use 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>
)
}
and I keep getting the same error:
./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() {
I do have the package in my package.json and installed in my 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",
I even reinstalled it to be sure. I'm not sure how to troubleshoot this error. Could it be caused because the pages.tsx is being SSR instead of being done on client side?
答案1
得分: 1
在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>
);
}
英文:
in RootLayout
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
then in Home page
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>
);
}
Proof of work:
Linkedin icon does not exist inside @fortawesome/free-solid-svg-icons. to use linkedin
npm i @fortawesome/free-brands-svg-icons
then in home page
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>
);
}
答案2
得分: 0
<br/>
我遇到了类似的问题，最终使用了ReactIcons。
ReactIcons包括Font Awesome Icons以及其他一些图标，这可能会非常有帮助。请参考此链接，验证是否适合您的需求。
https://react-icons.github.io/react-icons/
英文:
<br/>
I faced with similar issues and endedup using ReactIcons.
ReactIcons consist of Font Awesome Icons along with other icons which can be really helpful. Kindly refer this and validate if these suit your needs.
https://react-icons.github.io/react-icons/
答案3
得分: 0
我建议您将Font Awesome kit复制并粘贴到您的index.html文件的
部分，然后您就可以使用所有Font Awesome图标了。英文:
So I will recommend you to copy fontawesome kit and paste it in <head></head> of your index.html, then you will be able to use all fontawesome icons.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论