web-dev-qa-db-ja.com

nextjsプロジェクトにfont-awesomeを追加する方法

Webpackを使用してnext.jsプロジェクトにfont-awesomeを追加しようとしています。 Webで見つけたさまざまな手順（ファイルローダー、URLローダーを使用）に従ってみましたが、何も機能しませんでした。今のところwebpackでfont-awesomeの読み込みをあきらめましたが、どうすればこれを実現できるか知りたいです。現在、font-awesomeのロードに使用する.scssファイルがあります。

内容：

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

そして、フォントをnode_modules/font-awesome/fontsからstatic/fontsに手動で移動しています。これは完璧に機能しますが、2017年にwebpack2の方法があるかどうか知りたかったのです。

webpackwebpack-2nextjs
10
Andres Zapata

これを行うにはいくつかの方法があります。 1つ目は、next/headを介してheadコンポーネントを作成し、そこにインポートすることです。 here： を参照してください。

もう1つの方法は、ページをラップするHOCを作成し、単純なimport 'font-awesome/css/font-awesome.min.css'でインポートすることです。

または、同じ種類のインポートを使用して、ページの1つにインポートすることもできます。 （ただし、これはその特定のページに限定されると思います。それについては再確認してください）

お役に立てれば。

3
archae0pteryx

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']} />
0
Vadorequest