And*_*ata 8 webpack webpack-2 nextjs
我正在尝试使用webpack将font-awesome添加到我的next.js项目中.我试过按照我在网上找到的各种说明(使用文件加载器,url-loader),但没有任何对我有用.我暂时放弃了使用webpack加载font-awesome,但我想知道如何实现这一目标.目前我有一个.scss文件,我用来加载font-awesome.
它的内容是:
$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";
我手动将字体移动node_modules/font-awesome/fonts到static/fonts.这很好用,但我想知道2017年是否有一个webpack 2方法.
Yil*_*maz 21
要进行设置，请nextjs13参阅：
如何将 Font Awesome 添加到 Next.js 13 项目错误模块未找到
有3种方法：
Head1：通过向组件添加 FontAwesome 脚本创建组件，添加脚本并在组件或在每个页面中使用它的文件中Head呈现该组件。HeaderLayout
<Head>
<script
// you might need to get a newer version
src="https://kit.fontawesome.com/fbadad80a0.js"
crossOrigin="anonymous"
></script>
</Head>
_document.js。可以通过在文件夹下html创建 来覆盖 Next.js 中的根文件。您还可以添加其他一些 CDN。但是，最简单的方法是：_document.jspages
<Html>
<Head>
<link
rel="stylesheet"
type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
npmFontAwesome 所需的所有软件包npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
然后在文件顶部_app.js添加这些行：
npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
此后，您可以导入并使用其余的 FontAwesome 图标作为 React 组件，如下所示：
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faTrash } from "@fortawesome/free-solid-svg-icons";
<FontAwesomeIcon icon={faCheck} className="fas fa-check" style={{ color: "red" }}
></FontAwesomeIcon>
小智 12
这篇文章中的解决方案都不是关于如何通过 cdn 使用 font-awesome 的，所以，我将这样做。
有多种方法可以做到这一点，但我通常使用 _app.js 或 _document.js 来完成此类任务。
这是它如何通过 _document.js 完成的
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossOrigin="anonymous"
/>
<script src="https://kit.fontawesome.com/e20sdfsd9.js" crossOrigin="anonymous"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;这里我只是在下一个应用程序的 DOM 中添加了一个指向 fontawesome 的 css cdn 的链接，该链接将添加到浏览器中呈现的页面中。
要了解有关 _document.js 的更多信息，请参阅此处
可以通过 _app.js 遵循类似的方法，我现在没有使用它，但如果有人需要它，请随意发表评论，我会为你做的。
这是自定义应用程序或 _app.js的简要介绍
对于任何想要查看 Next 9 真实示例的人，请查看https://github.com/UnlyEd/next-right-now
有趣的部分是：
免责声明：我是该项目的贡献者
配置：pages/_app.tsx
import { config, library } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { faAngleDown } from '@fortawesome/pro-solid-svg-icons';
// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
library.add(
faGithub, faAngleDown
);
您可以通过从正确的存储库导入图标来使用solid/light/etc
用法：components/Nav.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
<FontAwesomeIcon icon={['fab', 'github']} />
编辑 Next.js 10：
虽然以上仍然有效，但我现在为 Next.js 10 及更高版本推荐的是将您的 Font-Awesome 相关配置拆分到不同的文件中，并将该文件导入_app.tsx. 这使代码更易于维护，仅此而已。
就像是：
有关与其他工具和框架集成的官方文档，请参阅此处。
您将能够执行以下操作：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
config.autoAddCss = false;
library.add(fas, fab);
return (
<FontAwesomeIcon icon={['fas', 'hat-wizard']} />
<FontAwesomeIcon icon={['fab', 'github']} />
)
或者
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAdobe } from '@fortawesome/free-brands-svg-icons/faAdobe';
return (
<FontAwesomeIcon icon={faAdobe} />
)
| 归档时间： |
|
| 查看次数： |
3982 次 |
| 最近记录： |